如何延迟.keyup()处理程序直到用户停止输入？

Question

我有一个搜索领域.现在它搜索每个keyup.因此,如果有人键入"Windows",它将使用AJAX搜索每个键盘:"W","Wi","Win","Wind","Windo","Window","Windows".

我希望有一个延迟,所以它只在用户停止键入200毫秒时搜索.

在函数中没有这个选项keyup,我试过了setTimeout,但它没有用.

我怎样才能做到这一点？

Answer 1

我将这个小函数用于相同的目的,在用户停止键入指定的时间后或在以高速率触发的事件中执行函数,例如resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

这个怎么运作:

该delay函数将返回一个内部处理单个定时器的包装函数,在每次执行中,定时器重新启动并提供时间延迟,如果在此时间过去之前发生多次执行,则定时器将重置并重新启动.

当计时器最终结束时,执行回调函数,传递原始上下文和参数(在此示例中,jQuery的事件对象,以及DOM元素this).

对于更复杂的东西,请查看jQuery Typewatch插件.

Answer 2

如果你想在类型完成后进行搜索,请使用全局变量来保存从你的setTimout调用返回的超时,clearTimeout如果它还没有发生则取消它,这样除了最后一个keyup事件之外它不会触发超时

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

或者使用匿名函数:

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}   

Answer 3

CMS回答的另一个细微增强.要轻松允许单独延迟,您可以使用以下内容:

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

如果你想重复使用相同的延迟,那就行了

var delay = makeDelay(250);
$(selector1).on('keyup', function() {delay(someCallback);});
$(selector2).on('keyup', function() {delay(someCallback);});

如果你想要单独的延迟,你可以做到

$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});

Answer 4

您还可以查看underscore.js,它提供了debounce这样的实用方法:

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

Answer 5

根据CMS的答案,我做了这个:

在包含jQuery之后放下面的代码:

/*
 * delayKeyup
 * http://code.azerti.net/javascript/jquery/delaykeyup.htm
 * Inspired by CMS in this post : http://stackoverflow.com/questions/1909441/jquery-keyup-delay
 * Written by Gaten
 * Exemple : $("#input").delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);
 */
(function ($) {
    $.fn.delayKeyup = function(callback, ms){
        var timer = 0;
        $(this).keyup(function(){                   
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        });
        return $(this);
    };
})(jQuery);

并简单地使用这样:

$('#input').delayKeyup(function(){ alert("5 secondes passed from the last event keyup."); }, 5000);

小心:作为参数传递的函数中的$(this)变量与输入不匹配

Answer 6

使用标签延迟多功能调用

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

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

您可以设置自己的延迟时间(可选,默认为500毫秒).并以"闭包方式"发送函数参数.

例如,如果要调用波纹管功能:

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

要防止多个send_ajax请求,请使用以下命令延迟它们:

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

只有在600毫秒时间范围内没有其他请求时,才会触发使用标签"检查日期"的每个请求.这个参数是可选的

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

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

调用相同功能但由于标签不同而导致它们独立延迟

Answer 7

jQuery：

var timeout = null;
$('#input').keyup(function() {
  clearTimeout(timeout);
  timeout = setTimeout(() => {
      console.log($(this).val());
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input type="text" id="input" placeholder="Type here..."/>

纯Javascript：

let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        console.log('Value:', input.value);
    }, 1000);
});

<input type="text" id="input" placeholder="Type here..."/>

Answer 8

此函数从Gaten的回答中扩展了函数,以便返回元素:

$.fn.delayKeyup = function(callback, ms){
    var timer = 0;
    var el = $(this);
    $(this).keyup(function(){                   
    clearTimeout (timer);
    timer = setTimeout(function(){
        callback(el)
        }, ms);
    });
    return $(this);
};

$('#input').delayKeyup(function(el){
    //alert(el.val());
    // Here I need the input element (value for ajax call) for further process
},1000);

http://jsfiddle.net/Us9bu/2/

Answer 9

如果有人喜欢延迟相同的功能,并且没有外部变量,他可以使用下一个脚本:

function MyFunction() {

    //Delaying the function execute
    if (this.timer) {
        window.clearTimeout(this.timer);
    }
    this.timer = window.setTimeout(function() {

        //Execute the function code here...

    }, 500);
}

Answer 10

超级简单的方法，旨在在用户输入完文本字段后运行功能...

<script type="text/javascript">
$(document).ready(function(e) {
    var timeout;
    var delay = 2000;   // 2 seconds

    $('.text-input').keyup(function(e) {
        console.log("User started typing!");
        if(timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
            myFunction();
        }, delay);
    });

    function myFunction() {
        console.log("Executing function for user!");
    }
});
</script>

<textarea name="text-input" class="text-input"></textarea>

Answer 11

这对我有用,我会延迟搜索逻辑操作,并检查该值是否与在文本字段中输入的值相同.如果值相同,那么我继续执行与搜索值相关的数据的操作.

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

Answer 12

我很惊讶没有人提到CMS中的多个输入问题非常好的剪辑.

基本上,您必须为每个输入单独定义延迟变量.否则,如果sb将文本放到第一个输入并快速跳转到其他输入并开始输入,则不会调用第一个回调!

根据其他答案,请参阅下面的代码:

(function($) {
    /**
     * KeyUp with delay event setup
     * 
     * @link http://stackoverflow.com/questions/1909441/jquery-keyup-delay#answer-12581187
     * @param function callback
     * @param int ms
     */
    $.fn.delayKeyup = function(callback, ms){
            $(this).keyup(function( event ){
                var srcEl = event.currentTarget;
                if( srcEl.delayTimer )
                    clearTimeout (srcEl.delayTimer );
                srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms);
            });

        return $(this);
    };
})(jQuery);

此解决方案将setTimeout引用保留在input的delayTimer变量中.它还将元素的引用传递给fazzyx建议的回调.

在IE6,8(comp-7),8和Opera 12.11中测试过.