blocks|key|2110137|text|请看一下autocomplete插件。我知道它允许您指定延迟或最小字符数。即使你最终没有使用这个插件，阅读代码也会给你一些关于如何自己实现它的想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2110138|entityMap|0|LINK|mutability|MUTABLE|url|http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/^0|4|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Take a look at the <a href="http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/" rel="nofollow noreferrer">autocomplete</a> plugin. I know that it allows you to specify a delay or a minimum number of characters. Even if you don't end up using the plugin, looking through the code will give you some ideas on how to implement it yourself.

blocks|key|616804|text|如果要在输入完成后进行搜索，请使用全局变量来保存从setTimout调用返回的超时，如果还没有发生，则使用clearTimeout取消超时，这样除了最后一个keyup事件外，它不会触发超时|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|616805|var+globalTimeout+=+null;++
$('#id').keyup(function(){
++if(globalTimeout+!=+null)+clearTimeout(globalTimeout);++
++globalTimeout+=setTimeout(SearchFunc,200);++
}+++
function+SearchFunc(){++
++globalTimeout+=+null;++
++//ajax+code
}|code-block|syntax|javascript|616806|或者使用匿名函数：|616807|var+globalTimeout+=+null;++
$('#id').keyup(function()+{
++if+(globalTimeout+!=+null)+{
++++clearTimeout(globalTimeout);
++}
++globalTimeout+=+setTimeout(function()+{
++++globalTimeout+=+null;++

++++//ajax+code

++},+200);++
}+++|616808|entityMap^0|P|9|1H|C|26|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

If you want to search after the type is done use a global variable to hold the timeout returned from your <code>setTimout</code> call and cancel it with a <code>clearTimeout</code> if it hasn't yet happend so that it won't fire the timeout except on the last <code>keyup</code> event

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

Or with an anonymous function :

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

 //ajax code

 }, 200); 
} 
</code></pre>

blocks|key|616913|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|616914|mytimeout+=+setTimeout(+expression,+timeout+);|code-block|syntax|javascript|616915|其中expression是要运行的脚本，timeout是在脚本运行前等待的时间(以毫秒为单位)-这不会影响脚本，只是将该部分的执行延迟到超时完成。|616916|clearTimeout(mytimeout);|616917|将重置/清除超时，因此只要脚本尚未执行，它就不会运行表达式中的脚本(如取消)。|616918|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Use 

<pre><code>mytimeout = setTimeout( expression, timeout );
</code></pre>

where expression is the script to run and timeout is the time to wait in milliseconds before it runs - this does NOT hault the script, but simply delays execution of that part until the timeout is done.

<pre><code>clearTimeout(mytimeout);
</code></pre>

will reset/clear the timeout so it does not run the script in expression (like a cancel) as long as it has not yet been executed.

blocks|key|2110300|text|我使用这个小函数来实现同样的目的，在用户停止输入指定的时间后或者在以高速率触发的事件中执行一个函数，比如resize|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2110301|​|2110302|function+delay(callback,+ms)+{
++var+timer+=+0;
++return+function()+{
++++var+context+=+this,+args+=+arguments;
++++clearTimeout(timer);
++++timer+=+setTimeout(function+()+{
++++++callback.apply(context,+args);
++++},+ms+%7C%7C+0);
++};
}


//+Example+usage:

$('#input').keyup(delay(function+(e)+{
++console.log('Time+elapsed!',+this.value);
},+500));|code-block|syntax|javascript|2110303|<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>|2110304|2110305|它的工作原理：|2110306|delay函数将返回一个内部处理单个计时器的包装函数，在每次执行中，计时器都会以提供的时间延迟重新启动，如果在此时间过去之前发生了多次执行，则计时器将重新设置并重新启动。|2110307|当计时器最终结束时，将执行回调函数，传递原始上下文和参数(在本例中，传递的是jQuery的事件对象和this形式的DOM元素)。|2110308|更新2019-05-16|2110309|我已经在现代环境中使用ES5和ES6特性重新实现了该功能：|2110310|function+delay(fn,+ms)+{
++let+timer+=+0
++return+function(...args)+{
++++clearTimeout(timer)
++++timer+=+setTimeout(fn.bind(this,+...args),+ms+%7C%7C+0)
++}
}|2110311|在set+of+tests中介绍了该实现。|2110312|有关更复杂的内容，请查看jQuery+Typewatch插件。|2110313|entityMap|0|LINK|mutability|MUTABLE|url|https://cms.gt/debounce-tests|1|https://github.com/dennyferra/TypeWatch^0|1G|6|0|0|0|0|0|0|0|5|0|1E|4|0|0|0|0|1|C|0|0|J|9|1|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1I|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1J|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1L|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1M|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1T|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Z|3|10|5|J|7|1V|8|@]|D|@]|E|$K|L]]|$1|11|3|12|5|6|7|1W|8|@]|D|@$9|1X|A|1Y|1|1Z]]|E|$]]|$1|13|3|14|5|6|7|20|8|@]|D|@$9|21|A|22|1|23]]|E|$]]|$1|15|3|-4|5|6|7|24|8|@]|D|@]|E|$]]]|16|$17|$5|18|19|1A|E|$1B|1C]]|1D|$5|18|19|1A|E|$1B|1E]]]]

I use this small function for the same purpose, executing a function after the user has stopped typing for a specified amount of time or in events that fire at a high rate, like <code>resize</code>:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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));</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;label for="input"&gt;Try it:
&lt;input id="input" type="text" placeholder="Type something here..."/&gt;
&lt;/label&gt;</code></pre>
</div>
</div>

<h2>How it works:</h2>
The <code>delay</code> function will return a wrapped function that internally handles an individual timer, in each execution the timer is restarted with the time delay provided, if multiple executions occur before this time passes, the timer will just reset and start again.
When the timer finally ends, the callback function is executed, passing the original context and arguments (in this example, the jQuery's event object, and the DOM element as <code>this</code>).
<h2>UPDATE 2019-05-16</h2>
I have re-implemented the function using ES5 and ES6 features for modern environments:
<pre><code>function delay(fn, ms) {
 let timer = 0
 return function(...args) {
 clearTimeout(timer)
 timer = setTimeout(fn.bind(this, ...args), ms || 0)
 }
}
</code></pre>
The implementation is covered with a <a href="https://cms.gt/debounce-tests" rel="noreferrer">set of tests</a>.
For something more sophisticated, give a look to the jQuery <a href="https://github.com/dennyferra/TypeWatch" rel="noreferrer">Typewatch</a> plugin.

blocks|key|616868|text|您还可以查看underscore.js，它提供了像debounce这样的实用程序方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|616869|var+lazyLayout+=+_.debounce(calculateLayout,+300);
$(window).resize(lazyLayout);|code-block|syntax|javascript|616870|entityMap|0|LINK|mutability|MUTABLE|url|http://underscorejs.org/|1|http://underscorejs.org/#debounce^0|6|D|0|P|8|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

You could also look at <a href="http://underscorejs.org" rel="noreferrer">underscore.js</a>, which provides utility methods like <a href="http://underscorejs.org/#debounce" rel="noreferrer">debounce</a>:

<pre><code>var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);
</code></pre>

blocks|key|701674|text|使用bindWithDelay+jQuery插件：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|701675|element.bindWithDelay(eventType,+[+eventData+],+handler(eventObject),+timeout,+throttle)|code-block|syntax|javascript|701676|entityMap|0|LINK|mutability|MUTABLE|url|http://briangrinstead.com/files/bindWithDelay/^0|2|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Use the <a href="http://briangrinstead.com/files/bindWithDelay/" rel="nofollow">bindWithDelay</a> jQuery plugin:

<pre><code>element.bindWithDelay(eventType, [ eventData ], handler(eventObject), timeout, throttle)
</code></pre>

blocks|key|1917710|text|基于CMS的回答，我做了这样的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1917711|将以下代码放在include+jQuery之后：|1917712|/*
+*+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);|code-block|syntax|javascript|1917713|简单地像这样使用：|1917714|$('#input').delayKeyup(function(){+alert("5+secondes+passed+from+the+last+event+keyup.");+},+5000);|1917715|注意:作为参数传递的函数中的$(this)变量与输入不匹配|1917716|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Based on the answer of CMS, I made this :

Put the code below after include jQuery :

<pre><code>/*
 * 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);
</code></pre>

And simply use like this :

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

Careful : the $(this) variable in the function passed as a parameter does not match input

blocks|key|616915|text|延迟函数，用于在每次按键时调用。jQuery+1.7.1或更高版本所需的|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|616916|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+);
++});
}|code-block|syntax|javascript|616917|用法：$('#searchBox').keyupDelay(+cb+);|CODE|616918|entityMap^0|G|K|0|0|3|X|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|M]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|O|$]]

Delay function to call up on every keyup.
jQuery 1.7.1 or up required

<pre class="lang-js prettyprint-override"><code>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 );
 });
}
</code></pre>

Usage: <code>$('#searchBox').keyupDelay( cb );</code>

blocks|key|1917735|text|此函数对Gaten的答案中的函数进行了一点扩展，以获取元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1917736|$.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);|code-block|syntax|javascript|1917737|http://jsfiddle.net/Us9bu/2/|offset|length|1917738|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

This function extends the function from Gaten's answer a bit in order to get the element back:

<pre><code>$.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);
</code></pre>

<a href="http://jsfiddle.net/Us9bu/2/" rel="noreferrer">http://jsfiddle.net/Us9bu/2/</a>

blocks|key|701830|text|令我惊讶的是，在CMS的非常好的片段中，没有人提到多个输入的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|701831|基本上，您必须为每个输入单独定义延迟变量。否则，如果sb将文本放到第一个输入中，然后快速跳转到其他输入并开始键入，则第一个输入的回调将不会被调用！|offset|length|style|BOLD|701832|请看我根据其他答案提供的以下代码：|701833|(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);|code-block|syntax|javascript|701834|此解决方案将setTimeout引用保留在input的delayTimer变量中。它还按照fazzyx的建议将元素的引用传递给回调。|701835|已在IE6、8(comp+-+7)、8和Opera12.11中测试。|701836|entityMap^0|0|1U|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

I'm surprised that nobody mention the problem with multiple input in CMS's very nice snipped.

Basically, you would have to define delay variable individually for each input. Otherwise if sb put text to first input and quickly jump to other input and start typing, callback for the first one WON'T be called!

See the code below I came with based on other answers:

<pre><code>(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);
</code></pre>

This solution keeps setTimeout reference within input's delayTimer variable. It also passes reference of element to callback as fazzyx suggested.

Tested in IE6, 8(comp - 7), 8 and Opera 12.11.

blocks|key|2110582|text|这是一个与CMS类似的解决方案，但为我解决了几个关键问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2110583|delays支持多个输入，可以运行未更改值的concurrently.|2110584|Ignores键事件(如Ctrl、Alt%2BTab).|unordered-list-item|2110585|
|2110586|Solves+a|2110587|(当执行回调且值已更改时)。|2110588|2110589|2110590|var+delay+=+(function()+{
++++var+timer+=+{}
++++++,+values+=+{}
++++return+function(el)+{
++++++++var+id+=+el.form.id+%2B+'.'+%2B+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)
++++++++++++}
++++++++}
++++}
}())|code-block|syntax|javascript|2110591|用法：|2110592|signup.key.addEventListener('keyup',+function()+{
++++delay(this).enqueue(300,+function()+{
++++++++console.log(this.value)
++++})
})|2110593|代码是以我喜欢的风格编写的，你可能需要添加一堆分号。|2110594|要牢记的事情：|2110595|入队唯一id是基于表单id和输入名称生成的，因此它们必须定义且唯一，或者您可以将其调整为您的situation.|2110596|delay返回一个易于根据您自己的需要进行扩展的对象。用于|offset|length|style|BOLD|2110597|2110598|的原始元素绑定到回调，因此|2110599|2110600|按预期工作(就像在第二个this+enqueue的第二个输出中忽略的值一样，它期望毫秒优先，我更喜欢这样，但您可能希望切换参数以匹配setTimeout.|CODE|2110601|2110602|例如，我使用的解决方案增加了另一个级别的复杂性，允许您取消执行，但这是一个很好的基础。|2110603|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|5|0|0|0|0|C|4|1U|A|H|7|0|0|0^^$0|@$1|2|3|4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1O|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|1P|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1Q|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|1T|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|1U|8|@]|9|@]|A|$]]|$1|V|3|W|5|Q|7|1V|8|@]|9|@]|A|$R|S]]|$1|X|3|Y|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1X|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|13|3|14|5|F|7|1Z|8|@$15|20|16|21|17|18]]|9|@]|A|$]]|$1|19|3|H|5|6|7|22|8|@]|9|@]|A|$]]|$1|1A|3|1B|5|F|7|23|8|@]|9|@]|A|$]]|$1|1C|3|H|5|6|7|24|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|F|7|25|8|@$15|26|16|27|17|1F]|$15|28|16|29|17|1F]|$15|2A|16|2B|17|18]]|9|@]|A|$]]|$1|1G|3|-4|5|6|7|2C|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2D|8|@]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|2E|8|@]|9|@]|A|$]]]|1K|$]]

This is a solution along the lines of CMS's, but solves a few key issues for me:

<ul>
<li>Supports multiple inputs, delays can run concurrently.</li>
<li>Ignores key events that didn't changed the value (like Ctrl, Alt+Tab).</li>
<li>Solves a race condition (when the callback is executed and the value already changed).</li>
</ul>

<pre class="lang-js prettyprint-override"><code>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)
 }
 }
 }
}())
</code></pre>

Usage:

<pre class="lang-js prettyprint-override"><code>signup.key.addEventListener('keyup', function() {
 delay(this).enqueue(300, function() {
 console.log(this.value)
 })
})
</code></pre>

The code is written in a style I enjoy, you may need to add a bunch of semicolons.

Things to keep in mind:

<ul>
<li>A unique id is generated based on the form id and input name, so they must be defined and unique, or you could adjust it to your situation.</li>
<li>delay returns an object that's easy to extend for your own needs.</li>
<li>The original element used for delay is bound to the callback, so <code>this</code> works as expected (like in the example).</li>
<li>Empty value is ignored in the second validation.</li>
<li>Watch out for enqueue, it expects milliseconds first, I prefer that, but you may want to switch the parameters to match <code>setTimeout</code>.</li>
</ul>

The solution I use adds another level of complexity, allowing you to cancel execution, for example, but this is a good base to build on.

blocks|key|2110653|text|基于CMS的回答，它只是忽略了没有改变值的关键事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2110654|var+delay+=+(function(){
++++var+timer+=+0;
++++return+function(callback,+ms){
++++++clearTimeout+(timer);
++++++timer+=+setTimeout(callback,+ms);
++++};
})();+

var+duplicateFilter=(function(){
++var+lastContent;
++return+function(content,callback){
++++content=$.trim(content);
++++if(content!=lastContent){
++++++callback(content);
++++}
++++lastContent=content;
++};
})();

$("#some-input").on("keyup",function(ev){

++var+self=this;
++delay(function(){
++++duplicateFilter($(self).val(),function(c){
++++++++//do+sth...
++++++++console.log(c);
++++});
++},+1000+);


})|code-block|syntax|javascript|2110655|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Based on the answer of CMS, it just ignores the key events that doesn't change value. 

<pre><code>var delay = (function(){
 var timer = 0;
 return function(callback, ms){
 clearTimeout (timer);
 timer = setTimeout(callback, ms);
 };
})(); 

var duplicateFilter=(function(){
 var lastContent;
 return function(content,callback){
 content=$.trim(content);
 if(content!=lastContent){
 callback(content);
 }
 lastContent=content;
 };
})();

$("#some-input").on("keyup",function(ev){

 var self=this;
 delay(function(){
 duplicateFilter($(self).val(),function(c){
 //do sth...
 console.log(c);
 });
 }, 1000 );


})
</code></pre>

blocks|key|2110688|text|这对我来说很有效，我延迟了搜索逻辑操作，并检查该值是否与文本字段中输入的值相同。如果值相同，则继续对与搜索值相关的数据执行操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2110689|$('#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);
});|code-block|syntax|javascript|2110690|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me where I delay the search logic operation and make a check if the value is same as entered in text field. If value is same then I go ahead and perform the operation for the data related to search value.

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

blocks|key|1917873|text|这是对CMS答案的另一个小小的改进。要轻松实现单独的延迟，您可以使用以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1917874|function+makeDelay(ms)+{
++++var+timer+=+0;
++++return+function(callback){
++++++++clearTimeout+(timer);
++++++++timer+=+setTimeout(callback,+ms);
++++};
};|code-block|syntax|javascript|1917875|如果您想重用相同的延迟，只需这样做|1917876|var+delay+=+makeDelay(250);
$(selector1).on('keyup',+function()+{delay(someCallback);});
$(selector2).on('keyup',+function()+{delay(someCallback);});|1917877|如果您想要单独的延迟，可以这样做|1917878|$(selector1).on('keyup',+function()+{makeDelay(250)(someCallback);});
$(selector2).on('keyup',+function()+{makeDelay(250)(someCallback);});|1917879|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Another slight enhancement on CMS's answer. To easily allow for separate delays, you can use the following:

<pre><code>function makeDelay(ms) {
 var timer = 0;
 return function(callback){
 clearTimeout (timer);
 timer = setTimeout(callback, ms);
 };
};
</code></pre>

If you want to reuse the same delay, just do

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

If you want separate delays, you can do

<pre><code>$(selector1).on('keyup', function() {makeDelay(250)(someCallback);});
$(selector2).on('keyup', function() {makeDelay(250)(someCallback);});
</code></pre>

blocks|key|617117|text|var+globalTimeout+=+null;++
$('#search').keyup(function(){
++if(globalTimeout+!=+null)+clearTimeout(globalTimeout);++
++globalTimeout+=setTimeout(SearchFunc,200);++
});
function+SearchFunc(){++
++globalTimeout+=+null;++
++console.log('Search:+'%2B$('#search').val());
++//ajax+code
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|617118|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var globalTimeout = null; 
$('#search').keyup(function(){
 if(globalTimeout != null) clearTimeout(globalTimeout); 
 globalTimeout =setTimeout(SearchFunc,200); 
});
function SearchFunc(){ 
 globalTimeout = null; 
 console.log('Search: '+$('#search').val());
 //ajax code
};
</code></pre>

blocks|key|702085|text|我还为Keyup+/+Keydown导致的限制高频ajax请求编写了一段代码。看看这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702086|https://github.com/raincious/jQueue|offset|length|702087|如下所示执行查询：|702088|var+q+=+new+jQueue(function(type,+name,+callback)+{
++++return+$.post("/api/account/user_existed/",+{Method:+type,+Value:+name}).done(callback);
},+'Flush',+1500);+//+Make+sure+use+Flush+mode.|code-block|syntax|javascript|702089|并像这样绑定事件：|702090|$('#field-username').keyup(function()+{
++++q.run('Username',+this.val(),+function()+{+/*+calling+back+*/+});
});|702091|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|F|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|15|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|C]]]]

Well, i also made a piece of code for limit high frequency ajax request cause by Keyup / Keydown. Check this out:

<a href="https://github.com/raincious/jQueue" rel="nofollow">https://github.com/raincious/jQueue</a>

Do your query like this:

<pre><code>var q = new jQueue(function(type, name, callback) {
 return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.
</code></pre>

And bind event like this:

<pre><code>$('#field-username').keyup(function() {
 q.run('Username', this.val(), function() { /* calling back */ });
});
</code></pre>

blocks|key|702122|text|这是我写的一个建议，可以处理表单中的多个输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702123|此函数获取输入字段的对象，放入您的代码中|702124|function+fieldKeyup(obj){
++++//++what+you+want+this+to+do

}+//+fieldKeyup|code-block|syntax|javascript|702125|这是实际的delayCall函数，负责处理多个输入字段|702126|function+delayCall(obj,ms,fn){
++++return+$(obj).each(function(){
++++if+(+typeof+this.timer+==+'undefined'+)+{
+++++++//+Define+an+array+to+keep+track+of+all+fields+needed+delays
+++++++//+This+is+in+order+to+make+this+a+multiple+delay+handling+++++
++++++++++function
++++++++this.timer+=+new+Array();
++++}
++++var+obj+=+this;
++++if+(this.timer[obj.id]){
++++++++clearTimeout(this.timer[obj.id]);
++++++++delete(this.timer[obj.id]);
++++}

++++this.timer[obj.id]+=+setTimeout(function(){
++++++++fn(obj);},+ms);
++++});
};+//+delayCall|702127|用法：|702128|$("#username").on("keyup",function(){
++++delayCall($(this),500,fieldKeyup);
});|702129|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Here is a suggestion I have written that takes care of multiple input in your form.

This function gets the Object of the input field, put in your code

<pre><code>function fieldKeyup(obj){
 // what you want this to do

} // fieldKeyup
</code></pre>

This is the actual delayCall function, takes care of multiple input fields

<pre><code>function delayCall(obj,ms,fn){
 return $(obj).each(function(){
 if ( typeof this.timer == 'undefined' ) {
 // Define an array to keep track of all fields needed delays
 // This is in order to make this a multiple delay handling 
 function
 this.timer = new Array();
 }
 var obj = this;
 if (this.timer[obj.id]){
 clearTimeout(this.timer[obj.id]);
 delete(this.timer[obj.id]);
 }

 this.timer[obj.id] = setTimeout(function(){
 fn(obj);}, ms);
 });
}; // delayCall
</code></pre>

Usage:

<pre><code>$("#username").on("keyup",function(){
 delayCall($(this),500,fieldKeyup);
});
</code></pre>

blocks|key|617169|text|使用Labels的延迟函数调用|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|617170|这就是我使用的解决方案。它会延迟你想要的任何函数的执行。它可以是按键搜索查询，也可以是快速点击上一步或下一步按钮(否则，如果连续快速点击，就会发送多个请求，而且根本不会被使用)。它使用一个全局对象来存储每个执行时间，并将其与最新的请求进行比较。|617171|因此，结果是只有最后的单击/操作将被实际调用，因为这些请求存储在队列中，如果队列中不存在具有相同标签的其他请求，则在X毫秒之后被调用！|617172|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%7C%7C500);
++}|code-block|syntax|javascript|617173|您可以自行设置延迟时间(可选，默认为500ms)。并以“闭包方式”发送函数参数。|617174|例如，如果您想调用bellow函数：|617175|function+send_ajax(id){console.log(id);}|617176|为了防止多个send_ajax请求，您可以使用以下命令延迟它们：|617177|delay_method(+"check+date",+function(){+send_ajax(2);+}+,600);|CODE|617178|只有在600毫秒的时间范围内没有其他请求时，才会触发每个使用“检查日期”标签的请求。此参数是可选的|617179|标签独立性(调用相同的目标函数)，但同时运行两个：|617180|delay_method("check+date+parallel",+function(){send_ajax(2);});
delay_method("check+date",+function(){send_ajax(2);});|617181|导致调用相同的函数，但由于它们的标签不同而独立地延迟它们|617182|entityMap^0|9|6|0|0|3E|0|0|1V|0|0|0|14|0|0|I|0|0|0|W|0|0|1Q|0|1Q|0|0|1D|0|0|P|0|0|0|S|0^^$0|@$1|2|3|4|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|S|3|T|5|L|7|1P|8|@]|D|@]|E|$M|N]]|$1|U|3|V|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|1T|8|@$9|1U|A|1V|B|C]|$9|1W|A|1X|B|Y]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|1Y|8|@$9|1Z|A|20|B|C]]|D|@]|E|$]]|$1|11|3|12|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|13|3|14|5|L|7|24|8|@]|D|@]|E|$M|N]]|$1|15|3|16|5|6|7|25|8|@$9|26|A|27|B|C]]|D|@]|E|$]]|$1|17|3|-4|5|6|7|28|8|@]|D|@]|E|$]]]|18|$]]

Delay Multi Function Calls using Labels

This is the solution i work with. It will delay the execution on ANY function you want. It can be the keydown search query, maybe the quick click on previous or next buttons ( that would otherwise send multiple request if quickly clicked continuously , and be not used after all). This uses a global object that stores each execution time, and compares it with the most current request. 

So the result is that only that last click / action will actually be called, because those requests are stored in a queue, that after the X milliseconds is called if no other request with the same label exists in the queue!

<pre><code>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);
 }
</code></pre>

You can set your own delay time ( its optional, defaults to 500ms). And send your function arguments in a "closure fashion".

For example if you want to call the bellow function:

<pre><code>function send_ajax(id){console.log(id);}
</code></pre>

To prevent multiple send_ajax requests, you delay them using:

<code>delay_method( "check date", function(){ send_ajax(2); } ,600);</code>

Every request that uses the label "check date" will only be triggered if no other request is made in the 600 miliseconds timeframe. This argument is optional

Label independency (calling the same target function) but run both: 

<pre><code>delay_method("check date parallel", function(){send_ajax(2);});
delay_method("check date", function(){send_ajax(2);});
</code></pre>

Results in calling the same function but delay them independently because of their labels being different

blocks|key|702220|text|如果有人喜欢延迟相同的函数，并且没有外部变量，他可以使用下一个脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|702221|function+MyFunction()+{

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

++++++++//Execute+the+function+code+here...

++++},+500);
}|code-block|syntax|javascript|702222|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If someone like to delay the same function, and without external variable he can use the next script:

<pre><code>function MyFunction() {

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

 //Execute the function code here...

 }, 500);
}
</code></pre>

blocks|key|1920180|text|将CMS+answer与Miguel's+one相结合可产生允许并发延迟的健壮解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1920181|var+delay+=+(function(){
++++var+timers+=+{};
++++return+function+(callback,+ms,+label)+{
++++++++label+=+label+%7C%7C+'defaultTimer';
++++++++clearTimeout(timers[label]+%7C%7C+0);
++++++++timers[label]+=+setTimeout(callback,+ms);
++++};
})();|code-block|syntax|javascript|1920182|当您需要单独延迟不同的操作时，请使用第三个参数。|1920183|$('input.group1').keyup(function()+{
++++delay(function(){
++++++++alert('Time+elapsed!');
++++},+1000,+'firstAction');
});

$('input.group2').keyup(function()+{
++++delay(function(){
++++++++alert('Time+elapsed!');
++++},+1000,+'2ndAction');
});|1920184|entityMap|0|LINK|mutability|MUTABLE|url|/a/1909508/1178314|1|/a/30503848/1178314^0|1|A|0|C|C|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

Combining <a href="/a/1909508/1178314">CMS answer</a> with <a href="/a/30503848/1178314">Miguel's one</a> yields a robust solution allowing concurrent delays.

<pre class="lang-js prettyprint-override"><code>var delay = (function(){
 var timers = {};
 return function (callback, ms, label) {
 label = label || 'defaultTimer';
 clearTimeout(timers[label] || 0);
 timers[label] = setTimeout(callback, ms);
 };
})();
</code></pre>

When you need to delay different actions independently, use the third argument.

<pre class="lang-js prettyprint-override"><code>$('input.group1').keyup(function() {
 delay(function(){
 alert('Time elapsed!');
 }, 1000, 'firstAction');
});

$('input.group2').keyup(function() {
 delay(function(){
 alert('Time elapsed!');
 }, 1000, '2ndAction');
});
</code></pre>

blocks|key|2111003|text|解释|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2111004|使用变量存储超时函数。然后使用clearTimeout()清除所有活动超时函数的此变量，然后使用setTimeout()再次设置活动超时函数。我们首先运行clearTimeout()，因为如果用户输入"hello"，我们希望函数在用户按下"o“键后立即运行(而不是每个字母都运行一次)。|offset|length|style|CODE|2111005|工作演示|2111006|超级简单的方法，设计为在用户在文本字段中完成键入后运行函数...|2111007|​|2111008|++++$(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!");
++++++++}
++++});|code-block|syntax|javascript|2111009|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Status:+<span+id="status">Default+Status 
<textarea+name="text-input"+class="text-input"></textarea>|2111010|2111011|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout|1|https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout^0|0|F|E|1C|C|25|E|F|E|0|1C|C|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@$D|1D|E|1E|1|1F]|$D|1G|E|1H|1|1I]]|A|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1L|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1M|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|P|7|1N|8|@]|9|@]|A|$Q|R]]|$1|U|3|M|5|6|7|1O|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|12]]|13|$5|Y|Z|10|A|$11|14]]]]

<h1>Explanation</h1>
Use a variable to store the timeout function. Then use <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout" rel="nofollow noreferrer"><code>clearTimeout()</code></a> to clear this variable of any active timeout functions, and then use <a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout" rel="nofollow noreferrer"><code>setTimeout()</code></a> to set the active timeout function again. We run <code>clearTimeout()</code> first, because if a user is typing &quot;hello&quot;, we want our function to run shortly after the user presses the &quot;o&quot; key (and not once for each letter).
<h1>Working Demo</h1>
Super simple approach, designed to run a function after a user has finished typing in a text field...
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> $(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!");
 }
 });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
Status: &lt;span id="status"&gt;Default Status&lt;/span&gt;&lt;br&gt;
&lt;textarea name="text-input" class="text-input"&gt;&lt;/textarea&gt;</code></pre>
</div>
</div>

blocks|key|1918075|text|今天看到这个有点晚了，但只是想把它放在这里，以防其他人需要。只需分离函数以使其可重用即可。下面的代码将在键入stop后等待1/2秒。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1918076|++++var+timeOutVar
$(selector).on('keyup',+function()+{

++++++++++++++++++++clearTimeout(timeOutVar);
++++++++++++++++++++timeOutVar=+setTimeout(function(){+console.log("Hello");+},+500);
++++++++++++++++});|code-block|syntax|javascript|1918077|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Saw this today a little late but just want to put this here in case someone else needed. just separate the function to make it reusable. the code below will wait 1/2 second after typing stop.

<pre><code> var timeOutVar
$(selector).on('keyup', function() {

 clearTimeout(timeOutVar);
 timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
 });
</code></pre>

blocks|key|1920243|text|基于CMS的答案，这里有一个新的延迟方法，它在使用中保留了“this”：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1920244|var+delay+=+(function(){
++var+timer+=+0;
++return+function(callback,+ms,+that){
++++clearTimeout+(timer);
++++timer+=+setTimeout(callback.bind(that),+ms);
++};
})();|code-block|syntax|javascript|1920245|用法：|1920246|$('input').keyup(function()+{
++++delay(function(){
++++++alert('Time+elapsed!');
++++},+1000,+this);
});|1920247|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Building upon CMS's answer here's new delay method which preserves 'this' in its usage:

<pre><code>var delay = (function(){
 var timer = 0;
 return function(callback, ms, that){
 clearTimeout (timer);
 timer = setTimeout(callback.bind(that), ms);
 };
})();
</code></pre>

Usage:

<pre><code>$('input').keyup(function() {
 delay(function(){
 alert('Time elapsed!');
 }, 1000, this);
});
</code></pre>

blocks|key|617215|text|在ES6中，用户也可以使用arrow+function+syntax。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|617216|在本例中，在调用searchFunc发出查询请求之前，在用户完成输入之后，代码会将keyup事件延迟400ms。|CODE|617217|const+searchbar+=+document.getElementById('searchBar');
const+searchFunc+=+//+any+function

//+wait+ms+(milliseconds)+after+user+stops+typing+to+execute+func
const+delayKeyUp+=+(()+=>+{
++++let+timer+=+null;
++++const+delay+=+(func,+ms)+=>+{
++++++++timer+?+clearTimeout(timer):+null
++++++++timer+=+setTimeout(func,+ms)
++++}
++++return+delay
})();

searchbar.addEventListener('keyup',+(e)+=>+{
++++const+query+=+e.target.value;
++++delayKeyUp(()+=>+{searchFunc(query)},+400);
})|code-block|syntax|javascript|617218|更新的Typescript版本：|617219|const+delayKeyUp+=+(()+=>+{
++let+timer:+NodeJS.Timeout;
++return+(func:+Function,+ms:+number)+=>+{
++++timer+?+clearTimeout(timer)+:+null;
++++timer+=+setTimeout(()+=>+func(),+ms);
++};
})();|617220|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions^0|1|3|D|L|0|0|8|A|15|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|H]|$9|18|A|19|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|1A|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|1B|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|1C|8|@]|D|@]|E|$L|M]]|$1|R|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

From ES6, one can use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions" rel="nofollow noreferrer">arrow function syntax</a> as well.
In this example, the code delays <code>keyup</code> event for 400ms after users finish typeing before calling <code>searchFunc</code> make a query request.
<pre class="lang-js prettyprint-override"><code>const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() =&gt; {
 let timer = null;
 const delay = (func, ms) =&gt; {
 timer ? clearTimeout(timer): null
 timer = setTimeout(func, ms)
 }
 return delay
})();

searchbar.addEventListener('keyup', (e) =&gt; {
 const query = e.target.value;
 delayKeyUp(() =&gt; {searchFunc(query)}, 400);
})
</code></pre>
Updated Typescript version:
<pre class="lang-js prettyprint-override"><code>const delayKeyUp = (() =&gt; {
 let timer: NodeJS.Timeout;
 return (func: Function, ms: number) =&gt; {
 timer ? clearTimeout(timer) : null;
 timer = setTimeout(() =&gt; func(), ms);
 };
})();
</code></pre>

blocks|key|617228|text|使用lodash+javascript库并使用_.debounce函数|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|617229|changeName:+_.debounce(function+(val)+{
++console.log(val)++++++++++++++++
},+1000)|code-block|syntax|javascript|617230|entityMap|0|LINK|mutability|MUTABLE|url|https://lodash.com/^0|2|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

User <a href="https://lodash.com" rel="nofollow noreferrer">lodash</a> javascript library and use _.debounce function

<pre><code>changeName: _.debounce(function (val) {
 console.log(val) 
}, 1000)
</code></pre>

blocks|key|617232|text|//+Get+an+global+variable+isApiCallingInProgress

//++check+isApiCallingInProgress+
if+(!isApiCallingInProgress)+{
//+set+it+to+isApiCallingInProgress+true
++++++isApiCallingInProgress+=+true;

++++++//+set+timeout
++++++setTimeout(()+=>+{
+++++++++//+Api+call+will+go+here

++++++++//+then+set+variable+again+as+false
++++++++isApiCallingInProgress+=+false;+++++
++++++},+1000);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|617233|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>// Get an global variable isApiCallingInProgress

// check isApiCallingInProgress 
if (!isApiCallingInProgress) {
// set it to isApiCallingInProgress true
 isApiCallingInProgress = true;

 // set timeout
 setTimeout(() =&gt; {
 // Api call will go here

 // then set variable again as false
 isApiCallingInProgress = false; 
 }, 1000);
}
</code></pre>

blocks|key|617241|text|jQuery|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|617242|​|617243|var+timeout+=+null;
$('#input').keyup(function()+{
++clearTimeout(timeout);
++timeout+=+setTimeout(()+=>+{
++++++console.log($(this).val());
++},+1000);
});|code-block|syntax|javascript|617244|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<input+type="text"+id="input"+placeholder="Type+here..."/>|617245|617246|纯Javascript:|617247|617248|let+input+=+document.getElementById('input');
let+timeout+=+null;

input.addEventListener('keyup',+function+(e)+{
++++clearTimeout(timeout);
++++timeout+=+setTimeout(function+()+{
++++++++console.log('Value:',+input.value);
++++},+1000);
});|617249|<input+type="text"+id="input"+placeholder="Type+here..."/>|617250|617251|entityMap^0|0|6|0|0|0|0|0|0|C|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|13|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|R|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|W|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|Y|$]]

jQuery:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var timeout = null;
$('#input').keyup(function() {
 clearTimeout(timeout);
 timeout = setTimeout(() =&gt; {
 console.log($(this).val());
 }, 1000);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;input type="text" id="input" placeholder="Type here..."/&gt;</code></pre>
</div>
</div>


Pure Javascript:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let input = document.getElementById('input');
let timeout = null;

input.addEventListener('keyup', function (e) {
 clearTimeout(timeout);
 timeout = setTimeout(function () {
 console.log('Value:', input.value);
 }, 1000);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" id="input" placeholder="Type here..."/&gt;</code></pre>
</div>
</div>

blocks|key|617362|text|如果您想在一段时间后执行某些操作，并在发生特定事件(如keyup+)后重置计时器，则最好的解决方案是使用clearTimeout和setTimeout方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|617363|//+declare+the+timeout+variable+out+of+the+event+listener+or+in+global+scope
var+timeout+=+null;

$("#some-id-to-bind-event").keyup(function()+{
++++clearTimeout(timout);+//+this+will+clear+the+recursive+unneccessary+calls
++++timeout+=+setTimeout(()+=>+{
+++++++++//+do+something:+send+an+ajax+or+call+a+function+here
++++},+2000);
++++//+wait+two+seconds

});|code-block|syntax|javascript|617364|entityMap^0|R|5|1G|C|1T|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

If you want to do something after a period of time and reset that timer after a specific event like <code>keyup</code>, the best solution is made with <code>clearTimeout</code> and <code>setTimeout</code> methods:
<pre><code>// declare the timeout variable out of the event listener or in global scope
var timeout = null;

$(&quot;#some-id-to-bind-event&quot;).keyup(function() {
 clearTimeout(timout); // this will clear the recursive unneccessary calls
 timeout = setTimeout(() =&gt; {
 // do something: send an ajax or call a function here
 }, 2000);
 // wait two seconds

});
</code></pre>

I’ve got a search field. Right now it searches for every keyup. So if someone types “Windows”, it will make a search with AJAX for every keyup: “W”, “Wi”, “Win”, “Wind”, “Windo”, “Window”, “Windows”.

I want to have a delay, so it only searches when the user stops typing for 200 ms.

There is no option for this in the <code>keyup</code> function, and I have tried <code>setTimeout</code>, but it didn’t work.

How can I do that?

How to delay the .keyup() handler until the user stops typing?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个搜索栏。现在它会搜索每一个密钥键。因此，如果有人键入“Windows”，它将使用AJAX搜索每个键：“W”、“Wi”、“Win”、“Wind”、“Windo”、“Window”、“Windows”。我希望有一个延迟，所以它只在用户停止键入200ms时才进行搜索。在keyup函数中没有此选项，我尝试过setTim...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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