Javascript：如何调整我的去抖函数以采用IF条件？ [英] Javascript: How do I tweak my debounce function to take an IF conditional?

问题描述

我发现了一个错误，并将其追踪。

您可以 查看简化我的代码示例 。

I found a bug, and tracked it down.
You can see a simplified example of my code here.

事实证明，我需要去除我的 if（）语句而不是对函数本身进行去抖动。

我想将debounce作为独立函数保留，但我不确定如何传递条件。

As it turns out, I need to debounce my if() statement rather than debouncing the function itself.
I'd like to keep the debounce as a standalone function, but I'm not sure then how to pass the conditional in.

任何指针？

以下是代码：

Here's the code:

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

推荐答案

使用你的例子，为什么不呢？传递切换为arg 1 ...类似于：

Using your example, why not pass toggle in as arg 1... something like:

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

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

You should also look into using the Function objects .call and .apply methods. They are for calling the function and passing in arguments. Taking the example function:

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

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

You can call it in three ways:

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

第一种是调用函数的标准方法。第一个和 .call 之间的区别是 .call 的第一个参数是函数的上下文对象（这个将指向函数内部），之后传递其他参数（ .call 。 .apply 的好处是你可以将一个数组传递给参数函数，它们将被适当地分配给参数列表，第一个参数是仍然是上下文对象。

The first is the standard way to call a function. The difference between the first and the .call is that the first parameter to .call is the context object of the function (what this will point to inside the function), the other parameters are passed after that (and a known list is required for .call. The benefit of .apply is that you can pass an array to the function of arguments and they will be assigned to the parameter list appropriately, the first parameter is still the context object.

它会简化你的去抖功能，而不必像你现在那样处理结构化对象。

It would simplify your debounce function, instead of having to deal with a structured object as you currently do.

你的去抖动建议：

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

更改当前如果：

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

可能信息过多（对不起）？

Maybe too much information (sorry)?

作为最后一点，我建议使用一个框架（如果可能的话）已经实现了这些函数（以及许多其他有用的函数），例如下划线。使用下划线你的例子看起来像：

As a last note, I'd recommend using a framework (if possible) where these functions have been implemented already (and many other useful functions) such as Underscore. Using Underscore your example would look like:

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

编辑

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

Fixed the underscore example, _.debounce returns a function that will execute only after the delay but it still needs to be called.

这篇关于Javascript：如何调整我的去抖函数以采用IF条件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！