一尘不染

如何正确地反跳Ajax请求

ajax

我有一个复选框,可以切换某些行为,但是如果有人连续点击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次,它将仅向服务器发送最新状态。

但是,使用它会有副作用,现在我的其他事件的click事件被搞砸了。我在这里做错什么了吗?有更好的防抖方法吗?


阅读 202

收藏
2020-07-26

共1个答案

一尘不染

不知道是否可以有“适当的”方法来执行此操作。

话虽如此,下划线具有这样的实用程序,可以创建功能的反跳版本…

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

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

链接到Underscorejs上的反跳文档

看看带注释的源代码如何做到这一点。

2020-07-26