私はzoomedという機能を持っています。この機能は、ユーザーが画面の一部をズームインするといつでも実行されます。したがって、ユーザーがズームすると数秒で数回実行できます。最後に関数が呼び出されたときに「終了ズーム」をログに記録します。これを達成する最良の方法は何ですか？この関数が過去5秒以内に一度呼び出された場合にのみ何かを実行できますか？
function zoomed() {
console.log('called');
// If this has only been called once in past
// 5 seconds, user is done zooming
// console.log('done zooming')
}
このような何かが働くだろう：
var doneZooming = true; //Global variable to store the current "state" of zooming
var zoomTimeout = null; //Variable to store our 5-second timer
function zoomed() {
resetZoomTimer();
console.log("zooming");
}
function resetZoomTimer() {
doneZooming = false;
clearTimeout(zoomTimeout); //End current timer
zoomTimeout = setTimeout(zoomComplete, 5000); //Reset the timer to 5 seconds
}
function zoomComplete() {
doneZooming = true;
console.log("zooming complete");
}
Hereを使用中のこのコードの例です。コンソールに注目してください。
zoomComplete()は、ユーザーがズームを終了したときに発生するコールバックとして機能します。
これが必要でない場合は、おそらくここでいくつかの機能を削除することができます。わかりやすくするために、私はそれを壊しました。同様の注記では、あなたが統合しようとしているが、再び個人的な好みであれば、resetZoomTimer()の機能をzoomed()機能に単純に移動することができます。
最後の実行を確認して追跡するために関数をラップすることができます。
ここfunction createBuffer(_fn, _delay){
if (typeof _fn != 'function') return null;
if (isNaN(_delay)) _delay = 1000;
var lastCall = 0;
var wrappedFn = function(){
if (lastCall + _delay > Date.now()) return;
lastCall = Date.now();
_fn.apply(this, arguments);
};
wrappedFn.reset = function(){
lastCall = 0;
};
return wrappedFn;
}
は、あなたのケースのためにそれを
// give to the 'createBuffer' your function and a timeout value
var myBuffFn = createBuffer(function(){
// this code will be fired once every 5 seconds
}, 5000);
// to reset the timer (if you need to re-execute before the timeout ends)
myBuffFn.reset();
// now you can use your 'myBuffFn' as a normal function
myBuffFn();
// example inside an interval
setInterval(myBuffFn, 0);
を使用する方法：
は、私は最近のアプリでそのような何かをした
var buffZoomed = createBuffer(zoomed, 5000);
今だけbuffZoomed();を呼び出すどこ必要があり、buffZoomed.reset();タイムアウトをリセットする場所
私は個人的に、関数実行の最後にsetTimeout関数が割り当てられたグローバル変数（関数のすべてのインスタンスからアクセス可能）を持っています。これにより、関数の別のインスタンスによってクリアされなかった場合にのみ実行されるタイマーが作成されます。
var zoomTimer;
function zoomed() {
console.log('called');
// Clears the timeout associated with the variable
clearTimeout(zoomTimer);
// Sets the 5 second timeout
zoomTimer = setTimeout(function() { console.log('done zooming'); }, 5000);
};
あなたが探しているのは、一般的にをデバウンスと呼ばれています。あなたのようなシナリオでは定期的に使用されます。
自分で関数を書くのは難しくありませんが、lodashのようなユーティリティライブラリは良い実装をしています。これは何
widget.on('zoom', _.debounce(zoomed, 5000, { trailing: true }));
は、ズームで5秒間のポーズ後、zoomed()関数を呼び出し、発生したズーム時に待機を開始です。