javascript - 从键盘上的字段中获取文本，但会延迟进一步输入

Question

我有一个表单，当各种元素发生变化时，它会远程提交。特别是在搜索字段上，我使用 keyup 来检测字段中的文本何时更改。这样做的问题是，当有人输入“chicken”时，表单会被提交七次，只计算最后一次。

最好是这样的

• 检测到键盘输入 - 开始等待(一秒钟)

• 检测到另一个 keyup - 重启等待时间

• 等待完成 - 获取值并提交表单

在我开始编写我自己的版本之前(我真的是一个只有一点点 js 的后端人员，我对所有东西都使用 jQuery)，是否已经有一个现有的解决方案？这似乎是一个普遍的要求。也许是一个 jQuery 插件？如果没有，最简单和最好的编码方式是什么？

更新 - 为 Dan 添加的当前代码(下方)

Dan - 这可能是相关的。我在页面上使用的 jQuery 插件之一 (tablesorter) 需要此文件 - “tablesorter/jquery-latest.js”，如果包含该文件，您的代码将导致与之前相同的错误:

jQuery("input#search").data("timeout", null) is undefined http‍://192.168.0.234/javascripts/main.js?1264084467 Line 11

也许不同的 jQuery 定义之间存在某种冲突？ (或其他)

$(document).ready(function() {
  //initiate the shadowbox player
//  Shadowbox.init({
//    players:  ['html', 'iframe']
//  });
}); 

jQuery(function(){
  jQuery('input#search')
    .data('timeout', null)
    .keyup(function(){
      jQuery(this).data('timeout', setTimeout(function(){
          var mytext = jQuery('input#search').val();
          submitQuizForm();
          jQuery('input#search').next().html(mytext);
        }, 2000)
     )
     .keydown(function(){
       clearTimeout(jQuery(this).data('timeout'));
     });
    });
});

function submitQuizForm(){
  form = jQuery("#searchQuizzes");
  jQuery.ajax({
    async:true, 
    data:jQuery.param(form.serializeArray()), 
    dataType:'script', 
    type:'get', 
    url:'/millionaire/millionaire_quizzes',
    success: function(msg){ 
     // $("#chooseQuizMainTable").trigger("update"); 
    }
  }); 
  return true;
}

Answer 1

抱歉，我还没有对此进行测试，它有点偏离我的头脑，但按照这些思路应该可以解决问题。将 2000 更改为服务器发布之间所需的任意毫秒数

<input type="text" id="mytextbox" style="border: 1px solid" />
<span></span>

<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#mytextbox')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(submitQuizForm, 2000));
        });
    });
</script>