如何触发一个延迟的onkeyup事件,直到用户暂停键入?

我有一个textarea,人们在那里input一些文本(自然),我想这样做,使得一个AJAX请求时不时地得到一些关于什么textarea的意见(如堆栈溢出的相关问题,但对于textarea,而不是文本input)。 问题是,我不能在每次按键时做一个AJAX请求(这样做是没有用的,而且非常耗费资源),我不确定最有效的方法是什么(每X个字每X秒? 或者是其他东西?)。

什么是最好的方式去做这件事?

先谢谢你。

您可以将keypress事件处理程序与setTimeout组合在一起,以便在按键后一段时间内发送Ajax请求,如果在定时器完成之前发生另一按键,则取消并重新启动定时器。 假设你有一个id为'myTextArea'的textarea和一个名为doAjaxStuff的Ajaxcallback函数:

 function addTextAreaCallback(textArea, callback, delay) { var timer = null; textArea.onkeypress = function() { if (timer) { window.clearTimeout(timer); } timer = window.setTimeout( function() { timer = null; callback(); }, delay ); }; textArea = null; } addTextAreaCallback( document.getElementById("myTextArea"), doAjaxStuff, 1000 ); 

另一种select是使用一个名为bindWithDelay的小型jQuery插件。 它使用与接受的答案相同的setTimeout技术,但透明地处理超时,因此您的代码更容易阅读。 源代码可以在github上看到。

 $("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000) 

你正在寻找的是所谓的debouncing 。 以下是本地JavaScript中的一个通用algorithm:

 function debounce(fn, duration) { var timer; return function() { clearTimeout(timer); timer = setTimeout(fn, duration) } } 

这里有一个如何使用onkeyup事件的例子:

 function debounce(fn, duration) { var timer; return function(){ clearTimeout(timer); timer = setTimeout(fn, duration); } } $(function(){ $('#txtSearch').on('keyup', debounce(function(){ alert('You paused your typing!'); }, 500)); }); 
 input{ padding:.5em; font-size:16px; width:20em; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="txtSearch" placeholder="Type here" /> 

如果您使用的是underscore.js,您可以使用debouncefunction 。

示例(用于keyup的jQuery):

 $('#myTextArea').keyup(_.debounce(function(){ alert('hello'); }, 500)); 

我个人会使用一个setInterval来监视textarea的变化,只有在检测到更改时才执行AJAXcallback。 每一秒都应该足够快速和缓慢。

如果您对jQuery解决scheme感兴趣, jQuery Suggest是一个很好的实现。

每次都没有意义重新发明轮子。

如果你在站点周围使用这个function,并不想跟踪所有的setTimeout参考等等,那么我把它打包成一个可用的插件。

该插件添加了一些选项到正常的$ .ajax方法来缓冲和取消以前的ajax调用。