33

这是一些用于搜索框的 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 个字符组成的输入框中，即在半秒内调用了 10 次 setTimeout，这似乎是处理器的负担，并且在我的测试中会导致一些明显的性能问题，所以希望有一个更清洁的选择？

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

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

4

3 回答 3

96

我经常使用以下方法，在用户停止输入指定的时间后执行回调的简单函数：

$(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 插件。

于 2010-02-08T06:34:38.050 回答
3

看看来自 Zurb的优秀Text Change Event插件，它是最优质 jQuery 商品的供应商。

于 2011-06-28T19:35:00.877 回答
0

这是一种更好的方法，无需使用插件：

var timeout;
$('input[type=text]').keypress(function() {
if(timeout) {
    clearTimeout(timeout);
    timeout = null;
}

timeout = setTimeout(myFunction, 5000)
})
于 2014-02-26T09:58:34.773 回答