web-dev-qa-db-ja.com

JavaScript / jQueryでタイムアウトをリセットする方法は?

WebページにフィールドAがあり、ユーザーが編集すると、jQueryを使用してAPI呼び出しが呼び出され、フィールドBが更新されます。編集後、APIを10秒ごとに呼び出してフィールドBを再度更新する必要があります。私は現在これを使用しています:

setTimeout(thisFunction, 10000);

問題は、ユーザーがフィールドAを編集するたびにこのタイムアウトが設定されることです。フィールドAを数回編集した後、タイムアウトが複数回設定され、APIが何度も呼び出されます。これにより、ウェブサイトはかなりストレスの多いものになります。

私がやりたいのは、ユーザーがフィールドAを編集するか、間隔が10秒に達してAPIをポーリングすることによって、フィールドが編集されるたびに新しいタイムアウトを設定することです。言い換えると;フィールドBが10秒以上更新されなかった場合は、フィールドを更新する必要があります。

最後に、ユーザーがボタンCをクリックすると、ポーリングが停止します。

だから私の質問;フィールドBが10秒以上更新されなかった場合にフィールドBを更新する関数を実行するにはどうすればよいですか。また、必要に応じて(ユーザーが別のボタンをクリックしたときに)ポーリングを停止するにはどうすればよいですか。

16
kramer65

タイマーはclearTimeoutでキャンセルできます。

var timer = null;
if (timer) {
    clearTimeout(timer); //cancel the previous timer.
    timer = null;
}
timer = setTimeout(thisFunction, 10000);
41
Oscar Paz
var update;

// something happened

clearTimeout(update);
update = setTimeout(thisFunction, 10000);
6