2

我发现了一个错误，并对其进行了跟踪。
您可以在此处查看我的代码的简化示例。

事实证明，我需要对我的if()语句进行去抖动而不是对函数本身进行去抖动。
我想保持 debounce 作为一个独立的函数，但我不确定如何传递条件。

任何指针？

这是代码： 

var foo = function(xyz) {
    alert(xyz);
};

function setter(func, arg1, arg2) {
    return {
        fn: func,
        arg1: arg1,
        arg2: arg2
    };
}

function debounce(someObject) {
    var duration = someObject.arg2 || 100;
    var timer;
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        someObject.fn(someObject.arg1);
        timer = 0;
    }, duration);
}

var toggle = true;

if (toggle) {
    debounce(setter(foo, 'The best things in life are worth waiting for.', 1250));
} else {
    foo('Instant gratification is sweet!!');
}
4

1 回答 1

8

使用您的示例，为什么不将切换作为 arg 1 传递...类似于：

var toggle = true;
var debouncedFunk = function(toggle) {
  if (toggle)
    // the function call
  else
    // something else
};
debounce(debouncedFunk, toggle, 1250);

您还应该考虑使用 Function 对象.call和.apply方法。它们用于调用函数并传入参数。以示例函数为例：

var example = function(one, two) { 
  // Logic here
};

您可以通过三种方式调用它：

// First
example(1, 2);
// Second
example.call({}, 1, 2);
// Third
example.apply({}, [ 1, 2 ]);

第一种是调用函数的标准方式。first 和 the 之间的区别在于，第.call一个参数 to.call是函数的上下文对象（this将指向函数内部的内容），其他参数在此之后传递（并且需要已知列表.call. 的好处.apply是您可以将数组传递给参数函数，它们将被适当地分配给参数列表，第一个参数仍然是上下文对象。

它将简化您的去抖动功能，而不是像您当前那样处理结构化对象。

对您的去抖动的建议：

var debounce = function(funk, delay) {
  var args = [];
  if (arguments.length > 2)
    args = [].slice.call(arguments, 2);
  setTimeout(function() { funk.apply({}, args); }, delay);
};

将您当前的 if 更改为：

var toggle = true;
var debouncedFunk = function(toggle) {
  if (toggle)
    // Do if true
  else
    // DO if false
};
debounce(debouncedFunk, 1000, toggle);

也许信息太多（对不起）？

最后一点，我建议使用已经实现这些功能（以及许多其他有用功能）的框架（如果可能），例如Underscore。使用下划线，您的示例将如下所示：

// Define debouncedFunk and toggle
debouncedFunk = _.bind(debouncedFunk, {}, toggle);
debouncedFunk = _.debounce(debouncedFunk, 1000);
debouncedFunk();

编辑

修复下划线示例，_.debounce返回一个仅在延迟后执行但仍需要调用的函数。

于 2012-06-30T00:05:10.557 回答