Javascript:在用户停止输入时进行处理

Question

我在网页上有一个文本框,我想将其值发送到XMLHttpRequest.现在我希望用户只需键入值,而无需按下按钮.但是如果我只是在键盘事件中发送请求,则每次按下键时它都会触发.

所以基本上我想要一些谎言

function KeyUpEvent()
{
  if (user is still typing)
    return;
  else 
    //do processing
}

如果解决方案可能来自简单的javascript或mootools会很棒.我不想使用任何其他库.

Answer 1

基本上,您想要在KeyUp上启动计时器,当KeyUp再次启动时,重置计时器.当用户停止输入时,计时器用完,您的请求可以在那时进行.

例:

var timout_id;

function keyup_handler(event) {
  if (timout_id) {
    clearTimeout(timout_id);
  }

  timout_id = setTimeout(function(){
    alert('sending data: \n' + event.target.value)
  }, 800);
}

只需使用首选方法将函数附加到输入,然后将其替换为alert您的首选操作.

当然,有很多方法可以概括这种方法并使其更具可重用性等,但我认为这说明了基本思想.

Answer 2

通常这样做的方法是在keyup事件上重新启动计时器.像这样的东西:

var keyupTimer;
function keyUpEvent(){
   clearTimeout(keyupTimer);
   keyupTimer = setTimeout(sendInput,1000); // will activate when the user has stopped typing for 1 second
} 

function sendInput(){
    alert("Do AJAX request");
}

Answer 3

在用户停止键入指定的时间后,我总是使用这个简单的函数来处理一个定时器,它将触发一个回调函数:

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

用法(使用MooTools的示例):

$('textInput').addEvent('keyup', function(e){
  typewatch(function () {
    // executed only 500 ms after the last keyup event
    // make Ajax request
  }, 500);
});

此解决方案与其他答案的解决方案之间的主要区别在于,所有计时器逻辑都由typewatch函数本身处理,事件处理程序不需要知道有关计时器的任何信息,它只是调用函数.此外,没有全局变量需要注意(计时器ID 不存储在全局变量中).