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

您所描述的功能称为“去抖动”。诸如下划线，lodash和＆符号之类的库具有a debounce method以使这种效果更方便。'

使用下划线，代码为：

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

虽然您需要包含新的依赖项，但不需要新功能。

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

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

1 个答案: