惯用jQuery延迟事件(仅在打字后短暂停顿)？(又名时间表/手表/键表)

Question

这里有一些搜索框的jQuery,我希望它实际上是一个反模式,并且我确信有一个更好的解决方案,我希望能指出:

我将在评论中描述它然后只是给出代码,因为评论可能比代码更清晰和简单:

• //在按键上设置函数调用.
• //函数调用在主事件发生之前有一个延迟.
• //当调用keypress函数时,擦除任何先前排队的事件并以标准延迟率创建一个新事件.
• //使用全局来存储setTimeout指针.
• // clearTimeout任何预先存在的指针.
• //开始新的延迟

代码:

                // set up a filter function call on keypress.
                $('#supplier-select-filter').keypress(function (){
                    // Currently, resets a delay on an eventual filtering action every keypress.
                    filterSuppliers(.3, this);
                });

                // Delayed filter that kills all previous filter request.
                function filterSuppliers(delay, inputbox){
                    if(undefined != typeof(document.global_filter_trigger)){
                        clearTimeout(document.global_filter_trigger);
                        // clearTimeout any pre-existing pointers.
                    }
                    // Use a global to store the setTimeout pointer.
                    document.global_filter_trigger = setTimeout(function (){
                        var mask = $(inputbox).val();
                        $('#user_id').load("supplier.php?action=ajax_getsuppliers_html&mask="+escape(mask)); 
                    }, 1000*delay); 
                    // Finally, after delay is reached, display the filter results.             
                }

问题:

在一个输入框中,搜索词平均可以包含10个字符,这是在半秒钟内调用setTimeout的10个,这似乎是处理器重,并且在我的测试中导致一些明显的性能问题,所以希望有一个更清洁替代？

.load()比接受JSON然后从json生成html更简单,但也许有更好的工具？

.keypress()似乎并不总是触发退格删除和其他必需品之类的东西,所以也许在这个输入框上使用keypress()并不理想？

Answer 1

我经常使用以下方法,一个简单的函数来执行回调,在用户停止键入指定的时间后::

$(selector).keyup(function () {
  typewatch(function () {
    // executed only 500 ms after the last keyup event.
  }, 500);
});

执行:

var typewatch = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

我认为这种方法非常简单,并不意味着任何全局变量.

有关更复杂的用法,请查看jQuery TypeWatch插件.