有人可以解释“去抖动”吗？在Javascript中的功能 [英] Can someone explain the "debounce" function in Javascript

问题描述

我对javascript中的debouncing功能感兴趣，这里写的是： http://davidwalsh.name/javascript-debounce-功能

I am interested in the "debouncing" function in javascript, written here : http://davidwalsh.name/javascript-debounce-function

不幸的是，代码的解释不够清楚，我无法理解。任何人都可以帮我弄清楚它是如何工作的（我在下面留下了我的评论）。总之，我真的不明白这是如何工作的

Unfortunately the code is not explained clearly enough for me to understand. Can anyone help me figure out how it works (I left my comments below). In short I just really do not understand how this works

   // 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 在错误的位置。

The copied code snippet previously had callNow in the wrong spot.

推荐答案

问题中的代码与链接中的代码略有不同。在链接中，检查（立即&&！timeout）在创建新的timout之前。拥有它后立即模式永远不会开火。我已经更新了我的答案，以便从链接中注释工作版本。

The code in the question was altered slightly from the code in the link. In the link, there is a check for (immediate && !timeout) BEFORE creating a new timout. Having it after causes immediate mode to never fire. I have updated my answer to annotate the working version from the link.

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);  
     }; 
};

这篇关于有人可以解释“去抖动”吗？在Javascript中的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！