web-dev-qa-db-ja.com

Jquery TimeOut関数を停止/オーバーライドする方法

ページでのユーザーアクションに応じて画面上部に通知メッセージを表示する小さなjqueryスニペットがあります。通知は、動的コンテンツが含まれるAjaxアクションの後に表示されることがよくあります。

例えば：

$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast");
setTimeout(function() {$("#mini").animate({height: "hide", opacity: "hide"}, "medium");}, 3000);

通知は適切に機能しますが、ユーザーが連続して2つ以上のアクションを実行した場合は例外です。

新しいアクションが実行された場合、以前の通知を「殺す」方法はありますか？アクション/セレクターには問題ありません。TimeOut関数だけです。停止するか、なんらかの方法でオーバーライドします。または、メッセージが消える前に数秒間画面に表示されるようにするためのより良い代替手段がありますか？

ありがとうございました。

javascriptjqueryajaxtimeoutnotifications
31
Tom

まず、setTimeout関数の戻り値を保存します。

// Set the timeout
var timeout = setTimeout(function()
    {
        // Your function here
    }, 2000);

次に、タイムアウトを終了する準備ができたら、前のclearTimeoutの呼び出しで保存された値を使用してsetTimeoutを呼び出すだけです。

// Then clearn the timeout
clearTimeout(timeout);
61
Justin Niessner

。stop（）を使用できます

一致した要素で現在実行中のアニメーションを停止します。

7
rahul

jQuery 1.4には、アニメーションの遅延を処理するための組み込みメソッドがあり、次のようなことができます。

$("#mini-txt").html("Thank you!");
$("#mini").fadeIn("fast").delay(3000).animate({height: "hide", opacity: "hide"}, "medium");

その後、アニメーションキューをクリーンアップしたいときに、次の操作を実行できます。

$("#mini").stop(true);
6
PetersenDidIt

これにより、関数の実行後に500msの遅延でタイムアウトがクリアされます

var timeout = setTimeout(function(){

/* YOUR FUNCTION */

}, 500, function(){
   clearTimeout(timeout);
});
0
Tadeusz Majkowski