誰かがJavaScriptで「デバウンス」機能を説明できますか
私はここに書かれたjavascriptの「デバウンス」機能に興味があります： http://davidwalsh.name/javascript-debounce-function
残念ながら、コードは私が理解できるほど明確に説明されていません。誰も私がそれがどのように機能するかを理解するのを助けることができます（私は下にコメントを残しました）。要するに、私は本当にこれがどのように機能するかを本当に理解していない
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
編集：コピーされたコードスニペットの以前は、callNowが間違った場所にありました。
質問のコードは、リンクのコードからわずかに変更されました。リンクには、新しいタイムアウトを作成する前に(immediate && !timeout)のチェックがあります。後に設定すると、即時モードが起動しなくなります。リンクから作業バージョンに注釈を付けるために回答を更新しました。
function debounce(func, wait, immediate) {
// 'private' variable for instance
// The returned function will be able to reference this due to closure.
// Each call to the returned function will share this common timer.
var timeout;
// Calling debounce returns a new anonymous function
return function() {
// reference the context and args for the setTimeout function
var context = this,
args = arguments;
// Should the function be called now? If immediate is true
// and not already in a timeout then the answer is: Yes
var callNow = immediate && !timeout;
// This is the basic debounce behaviour where you can call this
// function several times, but it will only execute once
// [before or after imposing a delay].
// Each time the returned function is called, the timer starts over.
clearTimeout(timeout);
// Set the new timeout
timeout = setTimeout(function() {
// Inside the timeout function, clear the timeout variable
// which will let the next execution run when in 'immediate' mode
timeout = null;
// Check if the function already ran with the immediate flag
if (!immediate) {
// Call the original function with apply
// apply lets you define the 'this' object as well as the arguments
// (both captured before setTimeout)
func.apply(context, args);
}
}, wait);
// Immediate mode and no wait timer? Execute the function..
if (callNow) func.apply(context, args);
}
}
/////////////////////////////////
// DEMO:
function onMouseMove(e){
console.clear();
console.log(e.x, e.y);
}
// Define the debounced function
var debouncedMouseMove = debounce(onMouseMove, 50);
// Call the debounced function on every mouse move
window.addEventListener('mousemove', debouncedMouseMove);ここで注意すべき重要なことは、debounceが、timeout変数を「閉じる」関数functionを生成することです。 timeout変数は、debounce自体が返され、canが異なる呼び出しで変更された後でも、生成された関数のすべての呼び出し中にアクセス可能なままです。
debounceの一般的な考え方は次のとおりです。
- タイムアウトなしで開始します。
- 生成された関数が呼び出された場合、タイムアウトをクリアしてリセットします。
- タイムアウトに達した場合、元の関数を呼び出します。
最初のポイントはvar timeout;であり、実際はundefinedです。幸いなことに、clearTimeoutは入力に対してかなり緩いです。undefinedタイマー識別子を渡すと、何もせず、エラーや何かをスローしません。
2番目のポイントは、生成された関数によって行われます。最初に、呼び出しに関するいくつかの情報（thisコンテキストとarguments）を変数に格納し、後でこれらをデバウンスされた呼び出しに使用できるようにします。次に、タイムアウトをクリアし（セットが1つあった場合）、setTimeoutを使用して置き換えるために新しいタイムアウトを作成します。 これはtimeoutの値を上書きし、この値は複数の関数呼び出しにわたって持続することに注意してください！これにより、デバウンスが実際に機能します：関数が複数回呼び出された場合、timeoutは新しいタイマーで複数回上書きされます。そうでない場合、複数の呼び出しによって複数のタイマーが開始され、allがアクティブのままになります-呼び出しは単に遅延しますが、デバウンスは行われません。
3番目のポイントは、タイムアウトコールバックで行われます。 timeout変数の設定を解除し、保存された呼び出し情報を使用して実際の関数呼び出しを行います。
immediateフラグは、関数をbeforeまたはafterタイマー。 falseの場合、タイマーがヒットするまでafterまで元の関数は呼び出されません。 trueの場合、元の関数はfirstが呼び出され、タイマーがヒットするまで呼び出されません。
ただし、if (immediate && !timeout)チェックは間違っていると思います。timeoutはsetTimeoutによって返されるタイマー識別子に設定されているため、その時点で!timeoutは常にfalseであり、関数を呼び出すことはできません。 nderscore.jsの現在のバージョン は、setTimeoutを呼び出すimmediate && !timeoutbeforeを評価するわずかに異なるチェックを持っているようです。 （アルゴリズムも少し異なります。たとえば、clearTimeoutを使用しません。）そのため、常に最新バージョンのライブラリを使用するようにしてください。 :-)
デバウンスされた関数は、呼び出されたときに実行されず、実行前に構成可能な期間にわたって呼び出しの一時停止を待機します。新しい呼び出しごとにタイマーが再起動されます。
スロットルされた機能が実行され、構成可能な期間待機してから、再度起動する資格があります。
デバウンスはキー入力イベントに最適です。ユーザーが入力を開始してから一時停止すると、すべてのキー押下が単一のイベントとして送信されるため、呼び出しの処理が削減されます。
スロットルは、ユーザーが設定された期間に1回だけ呼び出すことを許可するリアルタイムエンドポイントに最適です。
nderscore.js も実装を確認してください。
Demistifying Debounce in JavaScript というタイトルの投稿を書きました。ここで正確に説明します デバウンス関数の仕組み とデモを含めます。
デバウンス機能が最初に出会ったとき、私もデバウンス機能がどのように機能するかを完全には理解していませんでした。サイズは比較的小さいですが、実際にはかなり高度なJavaScriptの概念を採用しています！スコープ、クロージャー、およびsetTimeoutメソッドを適切に把握すると役立ちます。
そうは言っても、上記の私の投稿で説明し、デモした基本的なデバウンス機能は次のとおりです。
完成品
// Create JD Object
// ----------------
var JD = {};
// Debounce Method
// ---------------
JD.debounce = function(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if ( !immediate ) {
func.apply(context, args);
}
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait || 200);
if ( callNow ) {
func.apply(context, args);
}
};
};
説明
// Create JD Object
// ----------------
/*
It's a good idea to attach helper methods like `debounce` to your own
custom object. That way, you don't pollute the global space by
attaching methods to the `window` object and potentially run in to
conflicts.
*/
var JD = {};
// Debounce Method
// ---------------
/*
Return a function, that, as long as it continues to be invoked, will
not be triggered. The function will be called after it stops being
called for `wait` milliseconds. If `immediate` is passed, trigger the
function on the leading Edge, instead of the trailing.
*/
JD.debounce = function(func, wait, immediate) {
/*
Declare a variable named `timeout` variable that we will later use
to store the *timeout ID returned by the `setTimeout` function.
*When setTimeout is called, it retuns a numeric ID. This unique ID
can be used in conjunction with JavaScript's `clearTimeout` method
to prevent the code passed in the first argument of the `setTimout`
function from being called. Note, this prevention will only occur
if `clearTimeout` is called before the specified number of
milliseconds passed in the second argument of setTimeout have been
met.
*/
var timeout;
/*
Return an anomymous function that has access to the `func`
argument of our `debounce` method through the process of closure.
*/
return function() {
/*
1) Assign `this` to a variable named `context` so that the
`func` argument passed to our `debounce` method can be
called in the proper context.
2) Assign all *arugments passed in the `func` argument of our
`debounce` method to a variable named `args`.
*JavaScript natively makes all arguments passed to a function
accessible inside of the function in an array-like variable
named `arguments`. Assinging `arguments` to `args` combines
all arguments passed in the `func` argument of our `debounce`
method in a single variable.
*/
var context = this, /* 1 */
args = arguments; /* 2 */
/*
Assign an anonymous function to a variable named `later`.
This function will be passed in the first argument of the
`setTimeout` function below.
*/
var later = function() {
/*
When the `later` function is called, remove the numeric ID
that was assigned to it by the `setTimeout` function.
Note, by the time the `later` function is called, the
`setTimeout` function will have returned a numeric ID to
the `timeout` variable. That numeric ID is removed by
assiging `null` to `timeout`.
*/
timeout = null;
/*
If the boolean value passed in the `immediate` argument
of our `debouce` method is falsy, then invoke the
function passed in the `func` argument of our `debouce`
method using JavaScript's *`apply` method.
*The `apply` method allows you to call a function in an
explicit context. The first argument defines what `this`
should be. The second argument is passed as an array
containing all the arguments that should be passed to
`func` when it is called. Previously, we assigned `this`
to the `context` variable, and we assigned all arguments
passed in `func` to the `args` variable.
*/
if ( !immediate ) {
func.apply(context, args);
}
};
/*
If the value passed in the `immediate` argument of our
`debounce` method is truthy and the value assigned to `timeout`
is falsy, then assign `true` to the `callNow` variable.
Otherwise, assign `false` to the `callNow` variable.
*/
var callNow = immediate && !timeout;
/*
As long as the event that our `debounce` method is bound to is
still firing within the `wait` period, remove the numerical ID
(returned to the `timeout` vaiable by `setTimeout`) from
JavaScript's execution queue. This prevents the function passed
in the `setTimeout` function from being invoked.
Remember, the `debounce` method is intended for use on events
that rapidly fire, ie: a window resize or scroll. The *first*
time the event fires, the `timeout` variable has been declared,
but no value has been assigned to it - it is `undefined`.
Therefore, nothing is removed from JavaScript's execution queue
because nothing has been placed in the queue - there is nothing
to clear.
Below, the `timeout` variable is assigned the numerical ID
returned by the `setTimeout` function. So long as *subsequent*
events are fired before the `wait` is met, `timeout` will be
cleared, resulting in the function passed in the `setTimeout`
function being removed from the execution queue. As soon as the
`wait` is met, the function passed in the `setTimeout` function
will execute.
*/
clearTimeout(timeout);
/*
Assign a `setTimout` function to the `timeout` variable we
previously declared. Pass the function assigned to the `later`
variable to the `setTimeout` function, along with the numerical
value assigned to the `wait` argument in our `debounce` method.
If no value is passed to the `wait` argument in our `debounce`
method, pass a value of 200 milliseconds to the `setTimeout`
function.
*/
timeout = setTimeout(later, wait || 200);
/*
Typically, you want the function passed in the `func` argument
of our `debounce` method to execute once *after* the `wait`
period has been met for the event that our `debounce` method is
bound to (the trailing side). However, if you want the function
to execute once *before* the event has finished (on the leading
side), you can pass `true` in the `immediate` argument of our
`debounce` method.
If `true` is passed in the `immediate` argument of our
`debounce` method, the value assigned to the `callNow` variable
declared above will be `true` only after the *first* time the
event that our `debounce` method is bound to has fired.
After the first time the event is fired, the `timeout` variable
will contain a falsey value. Therfore, the result of the
expression that gets assigned to the `callNow` variable is
`true` and the function passed in the `func` argument of our
`debounce` method is exected in the line of code below.
Every subsequent time the event that our `debounce` method is
bound to fires within the `wait` period, the `timeout` variable
holds the numerical ID returned from the `setTimout` function
assigned to it when the previous event was fired, and the
`debounce` method was executed.
This means that for all subsequent events within the `wait`
period, the `timeout` variable holds a truthy value, and the
result of the expression that gets assigned to the `callNow`
variable is `false`. Therefore, the function passed in the
`func` argument of our `debounce` method will not be executed.
Lastly, when the `wait` period is met and the `later` function
that is passed in the `setTimeout` function executes, the
result is that it just assigns `null` to the `timeout`
variable. The `func` argument passed in our `debounce` method
will not be executed because the `if` condition inside the
`later` function fails.
*/
if ( callNow ) {
func.apply(context, args);
}
};
};
あなたがしたいことは次のとおりです：関数を次々に呼び出そうとする場合、最初はcancelledで、新しい関数は指定されたタイムアウトを待ってから実行する必要があります。したがって、実際には、最初の関数のタイムアウトをキャンセルする何らかの方法が必要ですか？しかし、どのように？ could関数を呼び出し、返されたtimeout-idを渡してから、そのIDを新しい関数に渡します。しかし、上記のソリューションははるかにエレガントです。
実行されるのは、返される関数のスコープでtimeout変数を効果的に使用可能にすることです。そのため、「サイズ変更」イベントが発生すると、debounce()が再度呼び出されることはないため、timeoutの内容は変更されず（！）、「次の関数呼び出し」で引き続き使用できます。
ここで重要なことは、基本的に、サイズ変更イベントがあるたびに内部関数を呼び出すことです。おそらく、すべてのresize-eventsが配列内にあると考えると、より明確になります。
var events = ['resize', 'resize', 'resize'];
var timeout = null;
for (var i = 0; i < events.length; i++){
if (immediate && !timeout) func.apply(this, arguments);
clearTimeout(timeout); // does not do anything if timeout is null.
timeout = setTimeout(function(){
timeout = null;
if (!immediate) func.apply(this, arguments);
}
}
timeoutが次の反復で使用可能になっていますか？私の意見では、thisをcontentに、argumentsをargsに名前変更する理由はありません。