Postponing Code Running In JavaScript

Creating user interfaces in JavaScript can sometimes lead to a problem, especially when the interface used AJAX to load data from the server. As many actions will be event driven by the user you can find that when a user triggers lots of events all at once the browser will send out lots of AJAX requests all at once. This can easily cause bandwidth issues but can also lead to the user getting confused while they patiently await the browser to settle down and let them get on with things.

There are numerous way to get around this issue, the first being to design programs so that AJAX requests are only issued when the user has clicked on something or when they start typing

However, sometimes you can't always get around this, for example, you might want to continuously validate a input box as the user types in it. The most stable and browser friendly (not to mention user friendly) method seems to be using a combination of the setTimeOut() and clearTimeout() methods. In this way you can wait until the user has finished what they are doing before running the code that uses AJAX. The following code will print an alert box, but only after a duration of 500 milliseconds after the last onclick event on the paragraph tag.

<p onclick="runIt();">Run It</p>	  
<script type="text/javascript">
  var run = '';
  
  function runIt(){
    if(run==''){
      run = setTimeout(actuallyRunIt,500);
    }else{
      clearTimeout(run);
      run = setTimeout(actuallyRunIt,500);
    };
  }
  
  function actuallyRunIt(){
    alert('Clicked');
  }       
</script>

This code looks to see if run is equal to '', which is what the variable has been set to, but is also what the variable is set to when clearTimeout() is called. The setTimeout() function will cause the run variable to be filled with a process ID. The second parameter in the setTimeout() function is the number of milliseconds to wait for before running the function or code defined in the first parameter. The only draw back with this method is that it is not possible to send parameters along with the callback function stipulated in setTimeout(), but there is a way around this, although it is a bit ugly. When the runIt() function is run you can set the values of a number of variables defined in the global scope that will then be used within the function the is called after the delay. The following code demonstrates this.

<p onclick="runIt();">Run It</p>
<script type="text/javascript">
  var run = '';
  var x = 0;
  			
  function runIt(){
    x++;
    if(run==''){
      run = setTimeout(actuallyRunIt,500);
    }else{
      clearTimeout(run);
      run = setTimeout(actuallyRunIt,500);
    };
  }
  
  function actuallyRunIt(){
    alert('Clicked '+x);
  }     
</script>

This code will print out the number of times that the user clicks on the p tag. Even if the user clicks on the tag lots of times it will still keep track and print the value 500 milliseconds after the last click event.