解释

使用变量存储超时函数。然后使用clearTimeout()清除该变量的任何活动超时函数，然后使用setTimeout()再次设置活动超时函数。我们首先运行clearTimeout()，因为如果用户键入“hello”，我们希望函数在用户按下“o”键后不久运行(而不是每个字母一次)。

演示工作

超级简单的方法，设计用于在用户在文本字段中输入完成后运行一个函数…

$(document).ready(function(e) { var timeout; var delay = 2000; // 2 seconds $('.text-input').keyup(function(e) { $('#status').html("User started typing!"); if(timeout) { clearTimeout(timeout); } timeout = setTimeout(function() { myFunction(); }, delay); }); function myFunction() { $('#status').html("Executing function for user!"); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Status: <span id="status">Default Status</span><br> <textarea name="text-input" class="text-input"></textarea>

使用标签延迟多函数调用

这是我的解决方案。它会延迟你想要的任何函数的执行。它可以是按下键搜索查询，也可以是快速单击上一个或下一个按钮(否则如果连续快速单击将发送多个请求，并且最终不会使用)。它使用一个全局对象存储每次执行时间，并将其与最新的请求进行比较。

因此，结果是只有最后一个点击/动作将被实际调用，因为这些请求存储在队列中，如果队列中没有其他具有相同标签的请求，则在X毫秒后调用!

function delay_method(label,callback,time){
    if(typeof window.delayed_methods=="undefined"){window.delayed_methods={};}  
    delayed_methods[label]=Date.now();
    var t=delayed_methods[label];
    setTimeout(function(){ if(delayed_methods[label]!=t){return;}else{  delayed_methods[label]=""; callback();}}, time||500);
  }

您可以设置自己的延迟时间(可选，默认为500ms)。并以“闭包方式”发送函数参数。

例如，如果你想调用下面的函数:

function send_ajax(id){console.log(id);}

为了防止多个send_ajax请求，可以使用以下方法延迟它们:

Delay_method ("check date"， function(){send_ajax(2);}, 600);

每个使用标签“check date”的请求只有在600毫秒的时间范围内没有其他请求时才会被触发。这个参数是可选的

标签独立性(调用相同的目标函数)，但同时运行:

delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});

导致调用相同的函数，但由于它们的标签不同而单独延迟它们

解释

使用变量存储超时函数。然后使用clearTimeout()清除该变量的任何活动超时函数，然后使用setTimeout()再次设置活动超时函数。我们首先运行clearTimeout()，因为如果用户键入“hello”，我们希望函数在用户按下“o”键后不久运行(而不是每个字母一次)。

演示工作

超级简单的方法，设计用于在用户在文本字段中输入完成后运行一个函数…

$(document).ready(function(e) { var timeout; var delay = 2000; // 2 seconds $('.text-input').keyup(function(e) { $('#status').html("User started typing!"); if(timeout) { clearTimeout(timeout); } timeout = setTimeout(function() { myFunction(); }, delay); }); function myFunction() { $('#status').html("Executing function for user!"); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Status: <span id="status">Default Status</span><br> <textarea name="text-input" class="text-input"></textarea>

这是一个沿着CMS的路线的解决方案，但为我解决了几个关键问题:

支持多输入，延迟可以并发运行。 忽略没有改变值的键事件(如Ctrl, Alt+Tab)。 解决竞态条件(当执行回调且值已更改时)。

var delay = (function() {
    var timer = {}
      , values = {}
    return function(el) {
        var id = el.form.id + '.' + el.name
        return {
            enqueue: function(ms, cb) {
                if (values[id] == el.value) return
                if (!el.value) return
                var original = values[id] = el.value
                clearTimeout(timer[id])
                timer[id] = setTimeout(function() {
                    if (original != el.value) return // solves race condition
                    cb.apply(el)
                }, ms)
            }
        }
    }
}())

用法:

signup.key.addEventListener('keyup', function() {
    delay(this).enqueue(300, function() {
        console.log(this.value)
    })
})

代码以我喜欢的风格编写，您可能需要添加一堆分号。

需要记住的事情:

一个唯一的id是基于表单id和输入名称生成的，所以它们必须是定义的和唯一的，或者您可以根据您的情况进行调整。 Delay返回一个易于扩展以满足自己需要的对象。 用于延迟的原始元素被绑定到回调，因此这可以按预期工作(如示例所示)。 在第二次验证中忽略空值。 注意enqueue，它首先需要毫秒，我更喜欢这样，但您可能想要切换参数以匹配setTimeout。

我使用的解决方案增加了另一个层次的复杂性，例如，允许您取消执行，但这是一个很好的基础。

看一下autocomplete插件。我知道它允许您指定延迟或最小字符数。即使你最终没有使用这个插件，浏览代码也会给你一些关于如何自己实现它的想法。

这对我来说很有效，我延迟了搜索逻辑操作，并检查值是否与文本字段中输入的值相同。如果值相同，则继续执行与搜索值相关的数据的操作。

$('#searchText').on('keyup',function () {
    var searchValue = $(this).val();
    setTimeout(function(){
        if(searchValue == $('#searchText').val() && searchValue != null && searchValue != "") {
           // logic to fetch data based on searchValue
        }
        else if(searchValue == ''){
           // logic to load all the data
        }
    },300);
});