Question

如果输入稳定，我想发出一个AJAX请求（为了在每个新字符后不发送请求）。我尝试了以下方法：

$('#input').keyup(function(){

  // Get the value when keyup is fired
  value = $('#input').val();

  setTimeout(function(){

    // If new value after 1 second is the same that the previous value
    if( value == $('#input').val() ){
      do_stuff();
    }

  }, 1000); // Wait 1 second to stabilize

});

但我最终得到了一个等待稳定1秒的脚本，然后多次触发请求而不是一次。

你是否知道更好的脚本，或者有一个jQuery方法可以解决这个问题？

由于

Answer 1

诀窍是在此期间发生变化时取消超时。

var timer = null;

$('#input').keyup(function() {
    // Get the value when keyup is fired
    var value = $('#input').val();

    // Reset timeout
    clearTimeout(timer);

    timer = setTimeout(function() {
        // If new value after 1 second is the same that the previous value
        if (value === $('#input').val()) {
            do_stuff();
        }
    }, 1000); // Wait 1 second to stabilize
});

Answer 2

如果用户再次输入如下文字，则必须清除超时：

    var Timeout; // initialize a variable
$(document).ready(function () {
    $('input#input').keypress(function () {
        var txtbox = $(this); // copy of this object for further usage

        if (Timeout) //check if timeout not null 
        clearTimeout(Timeout); // not null so clear it
        Timeout = setTimeout(function () { // set timeout for 1 second 
            alert(txtbox.val());
        }, 1000);
    });
});

FIDDLE DEMO

Answer 3

只需将变量设置为超时并在设置新超时之前将其清除

$('#input').keyup((function() {
var timeout;
return function(){
  if (timeout) {
    clearTimeout(timeout);
  }
  // Get the value when keyup is fired
  value = $('#input').val();

  timeout = setTimeout(function(){

    // If new value after 1 second is the same that the previous value
    if( value == $('#value').val() ){
      do_stuff();
    }

  }, 1000); // Wait 1 second to stabilize

};
})());

检查一段时间后输入是否未发生变化（稳定）

3 个答案: