javascript - 实现延迟的 jquery 更改事件处理程序

Question

我基本上想要实现的是创建某种delayedChange插件，以便仅在触发最后一个输入更改事件一段时间后才能调用某些操作(例如对服务器的ajax调用) 。目前我想出了 this (jsfiddle) 。我应该只在 5 秒(5000 毫秒)内看到警报，最后一次文本更改已发生，但它立即触发。

(function ($) {
    var timer;
    $.fn.delayedChange = function (onchange, delay) {
        return this.each(function () {
            $(this).bind('change', function () {
                if (typeof onchange == 'function') {
                    window.clearTimeout(timer);
                    timer = window.setTimeout(onchange.call(this), delay);
                }
            });
        });
    }
})(jQuery);

$(document).ready(function(){        
    $('input').delayedChange(function(){        
        alert($(this).attr('id'));        
    }, 5000);
});

最奇怪的是，这段代码实际上工作了一段时间，然后它的功能就无缘无故地消失了。显然有一些解释，但我现在看不到。是否有一些更确定的方法来实现/改进此类插件？

Answer 1

您所描述的功能称为“去抖动”。 underscore、lodash 和 &sand 等库有 a debounce method使这种效果变得方便。'

带下划线的代码为:

$('input').each(function () {
    $(this).on('change', _.debounce(...your function..., 5000));
});

尽管您需要包含新的依赖项，但不需要新函数。

<小时/>

我在第一个版本中犯了一个错误。您需要为每个元素生成单独的去抖函数，否则更改不同的元素将导致所有元素的计时器重置。