我有一个搜索域。现在它会搜索每一个按键。所以如果有人输入“Windows”,它会用AJAX搜索每个键:“W”,“Wi”,“Win”,“Wind”,“Windo”,“Window”,“Windows”。

我想有一个延迟,所以它只在用户停止输入200毫秒时搜索。

在keyup函数中没有这个选项,我尝试了setTimeout,但它不起作用。

我该怎么做呢?


当前回答

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

$('#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);
});

其他回答

使用jQuery插件bindWithDelay:

element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)

用户lodash javascript库并使用_.debounce函数

changeName: _.debounce(function (val) {
  console.log(val)                
}, 1000)

使用标签延迟多函数调用

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

因此,结果是只有最后一个点击/动作将被实际调用,因为这些请求存储在队列中,如果队列中没有其他具有相同标签的请求,则在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);});

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

延迟函数调用每个按键。 jQuery 1.7.1或更高版本

jQuery.fn.keyupDelay = function( cb, delay ){
  if(delay == null){
    delay = 400;
  }
  var timer = 0;
  return $(this).on('keyup',function(){
    clearTimeout(timer);
    timer = setTimeout( cb , delay );
  });
}

用法:$ (' # searchBox”)。keyupDelay(cb);

今天看到这个有点晚,但我想把它放在这里,以防有人需要。只需将函数分离以使其可重用。下面的代码在输入stop后将等待1/2秒。

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });