jQuery值更改事件延迟

Question

我想在用户完成文本框输入后执行类似2秒的函数.如果它们在1秒后继续输入,延迟时间将重置为2.

它应该起到类似于自动完成框的作用.

我知道2件事:change和keyup.我change遇到的问题是文本框必须松散焦点才能触发它.因为keyup,如果他们使用鼠标粘贴文本怎么办？

我可以在这里得到帮助吗？

Answer 1

oninput所有当前主流浏览器都支持HTML5 事件,可以在IE 8及更低版本中使用:

$("#myInput").bind("input", function () {
    // ...
})

• http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript(解释)
• http://whattheheadsaid.com/projects/input-special-event(插件)

一种非常简单的跨浏览器方法

$("#myInput").bind("input propertychange", function (evt) {
    // If it's the propertychange event, make sure it's the value that changed.
    if (window.event && event.type == "propertychange" && event.propertyName != "value")
        return;

    // Clear any previously set timer before setting a fresh one
    window.clearTimeout($(this).data("timeout"));
    $(this).data("timeout", setTimeout(function () {
        // Do your thing here
    }, 2000));
});

这将使事件在IE 9中触发两次(一个用于propertychange,一个用于input),但由于事件处理程序的性质而无关紧要.

Answer 2

您可以绑定input事件以及keyup旧版浏览器的后备.然后,您可以启动计时器,每次检测到用户操作时,计时器都会重置.通过在当前元素的数据中保存计时器句柄,可确保多个元素不会相互干扰.

$('input').bind('input keyup', function(){
    var $this = $(this);
    var delay = 2000; // 2 seconds delay after last input

    clearTimeout($this.data('timer'));
    $this.data('timer', setTimeout(function(){
        $this.removeData('timer');

        // Do your stuff after 2 seconds of last user input
    }, delay));
});