如何在用户使用 Jquery 输入期间在显着暂停时启动 AJAX 请求？答案

【问题标题】：How to start an AJAX request at a significant pause during user inputting using Jquery?如何在用户使用 Jquery 输入期间在显着暂停时启动 AJAX 请求？
【发布时间】：2009-12-28 03:56:43
【问题描述】：

当用户输入内容时，我需要使用 AJAX 对照数据库中的相应数据检查用户输入，但我无法根据数据库中的数据连续检查用户输入，因为这会使我的数据库服务器不堪重负。我只想在用户输入期间以显着/明显/合理的暂停开始 AJAX 请求。例如，输入光标一两秒不动。从用户的角度来看，他认为检查是实时的。如何使用 Jquery 做到这一点？

为什么我的代码没有按预期工作？

function subjectivecheck(id){
    alert(id);
    var cost=(new Date().getTime() - start.getTime())/1000;
    var value=$('#question'+id).val();
    $.post("subjectivecheck.php?",{val:value, qid:id,time:cost, a_id:"<?php echo $announcementid; ?>"},function(xm){

        switch(parseInt(xm)){
            case 4:
            { $htm='Congrats,you have passed the test.';
                $('#success').css({"color":"green"});
                $('#success').text($htm);
            return; 
            }
            case 1:
            {
            $htm='V';
        $('#sign'+id).css({"color":"green"});
        $('#sign'+id).text($htm);
        break;  
            }
            case 0:{

                 $htm='X';
        $('#sign'+id).css({"color":"red"});
        $('#sign'+id).text($htm);
        break;
            }
            case 3:{
                $('#subjectivequestion').text('You have failed at this announcement.');

                $('#choicequestions').text(" ");
            }
        }

    });

}
var ajaxCallTimeoutID = null;
function subjectivecheckcallback(id){
    if (ajaxCallTimeoutID != null)
    clearTimeout(ajaxCallTimeoutID);

  ajaxCallTimeoutID = setTimeout(subjectivecheck(id), 1000);

}

【问题讨论】：

标签： php javascript jquery ajax

【解决方案1】：

基本上，您希望在用户最后一次输入之后的某个时间启动 AJAX 调用。如果您使用的是文本框，您可以通过处理keyup 事件并使用setTimeout() 安排您的AJAX 调用来完成此操作。在事件处理程序开始时，您可以检查预定的调用并取消它（因为用户再次开始输入）：

var ajaxCallTimeoutID = null;
function doAjax() {
  // Do AJAX call here...
}

$('#myTextbox').keyup(function(ev) {

  if (ajaxCallTimeoutID != null)
    clearTimeout(ajaxCallTimeoutID);

  ajaxCallTimeoutID = setTimeout(doAjax, 300);
});

如果您想对整个表单中的用户输入做出反应，那么您只需扩展您的处理程序处理的事件。您可能希望处理 keyup 用于文本框、文本区域和选择元素，change 用于选择元素，可能还有 focus 处理所有内容。

【讨论】：

为什么我的代码没有按预期工作？每次输入新字母时都会执行 Ajax 函数。
setTimeout() 的第二个参数以毫秒为单位指定延迟。我的示例将其设置为 300 毫秒，因此它发生得很快（适用于自动完成查找，可能不适合您的目的）。尝试将该值更改为 3000（3 秒）左右。

【解决方案2】：

我使用以下函数，它基本上在用户停止输入指定的时间后执行回调：

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

用法：

$('input').keyup(function() {
    typewatch(function(){
      alert('Time elapsed, make Ajax request...');
    }, 1000 ); // wait one second
});

您可以查看 jQuery Typewatch 插件以了解更复杂的内容。

【讨论】：

【解决方案3】：

只需启动一个合理延迟的计时器：

var delaying = false;

function doAjax() {
  // ... begin Ajax
  delaying = false;
}

$('#myTextbox').keyup(function(ev) {
  if (!delaying) {
    delaying = true;
    setInterval(doAjax, 3000);
  }
});

【讨论】：