如何正确地去除ajax请求

Question

我有一个复选框,可以切换某些行为,但如果有人连续100次点击,我不想向服务器端发送100个请求.

这就是我到目前为止所找到的(找到此代码片段):

deBouncer = function($,cf,of, interval){
    var debounce = function (func, threshold, execAsap) {
        var timeout;
        return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null;
          }
          if (timeout)
            clearTimeout(timeout);  
          else if (execAsap)
            func.apply(obj, args);
          timeout = setTimeout(delayed, threshold || interval);
        }
    }
    jQuery.fn[cf] = function(fn){  return fn ? this.bind(of, debounce(fn)) : this.trigger(cf); };
  };

在我的文件准备功能:

deBouncer(jQuery,'smartoggle', 'click', 1500);

然后事件本身:

$(window).smartoggle(function(e){
  MyToggleFunction();
});

这是因为我已经将1500毫秒作为去抖动时段,所以如果你用1500毫秒点击n次,它将只向服务器发送最新状态.

然而,使用它有副作用,现在我的其他东西的点击事件搞砸了.我在这里做错了吗？是否有更好的去抖动方法？

Answer 1

只是去除执行实际工作的功能,我不会为此加载整个库.

var debouncedSomeFunction = debounce(someFunction, 1500);

debouncedSomeFunction();
debouncedSomeFunction();
debouncedSomeFunction();

setTimeout(debouncedSomeFunction, 2000);


function debounce(fn, bufferInterval) {
  var timeout;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(fn.apply.bind(fn, this, arguments), bufferInterval);
  };

}

function someFunction() {
    log('someFunction executed');
}

function log(text) {
   document.body.appendChild(document.createTextNode(text));
   document.body.appendChild(document.createElement('br'));
}

Answer 2

不确定是否有“正确”的方法来做到这一点。

话虽如此，下划线有这样一个实用程序，可以创建函数的去抖版本......

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500);

然后在您的点击处理程序中使用MyToggleDebounced。

链接到 underscorejs 上的 debounce 文档

查看带注释的来源，了解他们是如何做到这一点的。