How to start an AJAX request at a significant pause during user inputting using Jquery?

Question

When a user is inputting something, I need to check user input against the corresponding data in database using AJAX, but I can't continuously check user input against the data in database because that would overwhelm my database server. I just want to start an AJAX request at a significant/obvious/sensible pause during user inputting. For example, the input cursor doesn't move for one or two seconds.From the viewpoint of user, he thinks the check is real-time. How to do this using Jquery?

Why doesn't my code work as expected?

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);

}

Answer 1

Basically, you want to initiate your AJAX call some time after the user's last input. If you're using a textbox, you can do this by handling the keyup event and scheduling your AJAX call using setTimeout(). At the start of your event handler, you can check for a scheduled call and cancel it (since the user started typing again):

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

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

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

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

If you want to react to user input across the entire form, then you just have to expand the events your handler handles. You would probably want to handle keyup for text boxes, textareas and select elements, change for select elements, and probably focus on everything.

Answer 2

Simply start a timer for a reasonable delay:

var delaying = false;

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

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

Answer 3

I use the following function, it basically executes a callback after the user has stopped typing for a specified amount of time:

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

Usage:

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

You could give a look to the jQuery Typewatch plugin for something more complex.