0

我想了解 underscore.js debounce 功能的机制：http: //underscorejs.org/#debounce

这是它的本机代码： 

_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function() {
      var last = _.now() - timestamp;

      if (last < wait && last > 0) {
        timeout = setTimeout(later, wait - last);
      } else {
        timeout = null;
        if (!immediate) {
          result = func.apply(context, args);
          if (!timeout) context = args = null;
        }
      }
    };

    return function() {
      context = this;
      args = arguments;
      timestamp = _.now();
      var callNow = immediate && !timeout;
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) {
        result = func.apply(context, args);
        context = args = null;
      }

      return result;
    };
  };

我遇到的问题是内部可返回函数中使用的上下文变量。我不明白为什么我们应该在这里使用它以及它包含什么上下文。我尝试在不应用任何上下文的情况下通过简单调用去抖动函数来使用相同的函数，它也运行良好。这是我对这两个功能的小玩意：http: //jsfiddle.net/vlrt/fby9dhe0/11/

那么，这里的上下文是否必要？需要应用什么上下文？

4

2 回答 2

1

上下文是this调用该函数的去抖动版本的上下文。如果我们要对对象上的方法进行去抖动，那么我们将使用 调用它object.debounced_function，但我们希望使用与 相同的对象调用原始函数this。

如果 debounced 函数不是对象方法，或者使用 no 调用this，则 context 将为 null 或window其他内容，原始函数将使用 as 调用this，但没有人会关心。

我假设您了解该Function#apply方法，它调用具有特定上下文 ( this) 和一组参数的函数。

于 2014-09-02T14:23:28.177 回答
0

你能举一些具体的例子吗？这是我的代码，但 1. apply(context, args); 2.函数（）；他们安慰同样，但他们不应该吗？

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;
  this.a =222;
  // 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);
        func();
      }
    }, wait);

    // Immediate mode and no wait timer? Execute the function..
    if (callNow) func.apply(context, args);
  }
}

function test() {
    this.a = 100;
    this.b = 200;
}
test.prototype.m1 = function() {
    console.log("m1", this.a);
}
var tt = new test();
debounce(tt.m1, 1000)();
于 2020-02-04T10:11:42.180 回答