How to initiate a function including AJAX request some time after the user's last input?

Question

This is the crucial code:

var ajaxCallTimeoutID = null;
$(document).ready(function() {
 $("input[id^='question']").live('keyup',function(ev){
    id=this.id.substr(8);
    if (ajaxCallTimeoutID != null)
    clearTimeout(ajaxCallTimeoutID);
ajaxCallTimeoutID = setTimeout(subjectivecheck(id), 1000);

}); 
});

However,

subjectivecheck(id) is immediately executed when a user inputs a letter, but I hope it is called after the user has stopped typing for a specified amount of time. How to solve this problem?

function subjectivecheck(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(" ");
            }
        }

    });

}

Answer 1

You need to wrap it in an anonymous function:

ajaxCallTimeoutID = setTimeout(function(){subjectivecheck(id)}, 1000);

Without the wrapped function(){} the function subjectivecheck gets called immediately, but when you wrap it you pass a reference to the function as an argument. Later that function can be called, which will then call your function.

Answer 2

What I usually do is start the timeout on keyup, and clear the timeout on keydown (or keypress).

var timers=[];
$('input[id^="question"]').keydown(function(){
  while(timers.length){
    clearTimeout(timers.shift());
  }
}).keyup(function(){
  var timeout=setTimeout(function(){
    //ajax call here
  }, 300);
  timers.push(timeout);
});