Question

好的，所以我在google中搜索，你在输入中输入文字，它会立即为你提供条目。但我不喜欢那样。我使用$("TEXTINPUT").keyup(function() {之类的东西。当用户输入速度非常快时，它会多次连接到数据库。是否有可能，只有当用户停止键入1-2秒，我们才会连接到PHP文件，但不是立即？我需要在jQuery中这样做。感谢。

Answer 1

如果您使用Underscore Library就像这样简单：

$("TEXTINPUT").keyup(_.throttle(function () {...}, 150));

来自Underscore网站的文档：

节流 _.throttle（功能，等待）

返回函数的受限制版本，在调用时   反复，实际上只会调用包装函数一次   每等待几毫秒。对于速率限制事件很有用   发生得比你能跟上的还要快。

还有debounce功能：

debounce _.debounce（功能，等待）

调用debounced函数会将其执行推迟到等待之后   自上次函数以来经过的毫秒数   调用。用于实现应该发生的行为   输入停止后到达。例如：渲染预览   Markdown注释，在窗口后重新计算布局   停止调整大小...

Answer 2

尝试：

var time_out;
$("TEXTINPUT").keyup(function(){
    clearTimeout(time_out);
    time_out = setTimeout(your_function, 500);
}

function your_function()
{
    /*CHECK DATABASE*/
}

Answer 3

此函数的行为有点像underscore.js，但没有额外的依赖。它还会将调用的作用域和参数传递给包装函数。与YoannM的答案不同，这会返回一个不使用外部变量的自包含回调（EG，可以根据需要多次使用）。

function throttle (func, wait) {
    return function() {
        var that = this,
            args = [].slice(arguments);

        clearTimeout(func._throttleTimeout);

        func._throttleTimeout = setTimeout(function() {
            func.apply(that, args);
        }, wait);
    };
}

使用方法几乎与underscore.js库的用法相同。

$('input').on('input keyup', throttle(function() {
    // ...
}, 100));

Answer 4

以下是我通常采用的方法：

$(function(){
  var tiTO, jqXHR;
  $('textinput').keyup(function(){
    if (tiTO) clearTimeout(tiTO);
    if (jqXHR && jqXHR.abort) jqXHR.abort();
    tiTO = setTimeout(function(){
      jqXHR = $.ajax({....});
      //Ajax call to PHP
    },2000);
  });
});

每个keyup重置超时，并中止任何活动的ajax。

如何限制jQuery事件的回调？

4 个答案: