我有一个复选框,可以切换某些行为,但是如果有人连续点击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事件被搞砸了。我在这里做错什么了吗?有更好的防抖方法吗?
不知道是否可以有“适当的”方法来执行此操作。
话虽如此,下划线具有这样的实用程序,可以创建功能的反跳版本…
var MyToggleDebounced = _.debounce(MyToggleFunction, 1500);
然后MyToggleDebounced在点击处理程序中使用。
MyToggleDebounced
链接到Underscorejs上的反跳文档
看看带注释的源代码如何做到这一点。