jQuery関数がテキストを更新する前にフェードアニメーションを強制終了する方法

Question

チャットルームにリンクされているPythonプログラムからメッセージを受け取るjavascriptアプリケーションを開発しています。目標は、javascriptアプリケーションが各チャットメッセージの「ありがとう+ユーザー」にHTML段落のテキストを更新し、フェードインし、遅らせてからフェードアウトすることです。

私の問題は、私は一度に複数のチャットメッセージを受信した場合、段落テキストは、各チャット送信者のためにすぐに更新し、フェージングアニメーションを待たないということです。

は今のところ、各チャットメッセージのために、私はチャットラインを受け取るたびに、以下の関数を呼び出しています。

function fadeInfadeOutMessage(name) { 
    $('#twitchname').html("Thank you <br> " + name).fadeIn(timeFade[0]).delay(timeFade[1]).fadeOut(timeFade[2]) 
} 

フェードシーケンスが終了するまでhtmlを更新しないようにするために必要な変更はありますか？

Answer 1

約束により、あなたは行動を完了し、その後何かをすることができます。だから下の例を見て、アニメーションキューが完成するまで何もしないことを約束するメッセージを出します。最初の約束は、彼が何かを始めようとしていないのですぐに発砲する。何もする必要がなければ、約束はいつでもすぐに発火するでしょう。だから何度もボタンをクリックしても、それがやり直す前に何をやっていたのかを常に確認しています。

出典：https://api.jquery.com/promise/

フィドル：https://jsfiddle.net/pxospknj/

JS：

// No changes to this function. Its our callback now. 
// The thing that happens after promises complete 
function fadeInfadeOutMessage(name) { 
    $('#somemessage').html("Thank you <br> " + name).fadeIn(1000).delay(1000).fadeOut(1000); 
} 


$("#somebutton").on("click", 
    function() { 
    var element = $("#somemessage"); 

    // Make the element promise us that when its done doing whatever 
    // its doing it will complete what we just asked it to do which 
    // is animate again. 
    element.promise().done(
     function() { 
     fadeInfadeOutMessage("gary"); 
     } 
    ) 
    } 
); 

HTML：

<button id="somebutton">go</button> 
<div id="somemessage"></div> 

============= =============

OKので、デフォルトのキューは影響はそれほどアニメーションがキューイングされている間、HTMLがすぐに起こる更新するためです。私たちが文字列を渡し、超高速アニメーションで待ち行列を偽造し、コールバック中にhtmlを更新してから実際のアニメーションを実行すると、Buuuuutはそれを取り除くことができます。

この時点での約束は、たとえそうであっても心の中でそれらを維持し、将来の使用のためにそれらをよく読んでいるため、デフォルトのエフェクトキューの必要はなく、非同期コードを扱うとき、彼らは超強力ですされていません。

フィドル：https://jsfiddle.net/pxospknj/4/

HTML：

<button id="somebutton">go</button> 
<div id="somemessage"></div> 

JS：

function fadeInfadeOutMessage(name) { 
    // Immediate hide so we know its hidden before updating and we can use 
    // the callback to update html while taking advantage of the effects queue 
    $('#somemessage').hide(0, 
    function() { 
     $(this).html("Thank you <br> " + name); 
    }).fadeIn(1000).delay(1000).fadeOut(1000); 
    // Proceed as normal with other animations 
} 

// Init our count so we see different strings updating properly 
var count = 0; 
$("#somebutton").on("click", 
    function() { 
    // Make sure we pass in string so it has scope 
    fadeInfadeOutMessage("gary" + count); 
    // Update count 
    count++; 
    } 
);