Simulating Delay using jQuery and setTimeout()

Sometimes you may wish to simulate a delay of events such as simulating loading of results before showing on the page. This example uses a recursive setTimeout() to call a function which loops through an array of data which has the results of a system precheck to check for things such as JavaScript, Flash, Browser Version etc… When I get time I might code this into a jQuery plugin which will be easy just need to determine which options to provide to cater for different usage.

simulating-delay-in-jquery

Demo

jQuery Code Recursive setTimeout()

//data and settings
var result = '<p class="{$color}">Precheck passed.</p>', //html for main result
    delay = 500, //delay of sub results
    data = Array(
    '<li class="green">Javascript <img src="http://www.jquery4u.com/images/green_tick_small.gif"></li>',
    '<li class="orange">System <img src="http://www.jquery4u.com/images/green_tick_small.gif"></li>',
    '<li class="green">Device <img src="http://www.jquery4u.com/images/green_tick_small.gif"></li>',
    '<li class="green">Browser <img src="http://www.jquery4u.com/images/green_tick_small.gif"></li>',
    '<li class="green">Flash <img src="http://www.jquery4u.com/images/green_tick_small.gif"></li>'
    );

//self executing function starting from array index 0
(function process_els(el_index) {
 
    var el = data[el_index],
        precheckUl = $('#precheck ul'),
        loadingLi = $('<li class="loading"><img width="18px" height="18px" src="http://www.jquery4u.com/images/ajax_loader.gif"></li>'),
        sysPreId = "syspre_"+el_index;
 
  //show loading image
  precheckUl.append(loadingLi.clone().attr("id",sysPreId));
 
  //after simulated delay replace loading image with sub check result
  setTimeout( function()
  {
      precheckUl.find('li.loading:first').replaceWith(data[el_index]);
     
  }, delay);
 
  //to simulate the delay recursively call itself until all array elements have been processed
  if (el_index + 1 < data.length) {
    setTimeout(function() { process_els(el_index + 1); }, delay);
  }
    else
    {
        setTimeout(function()
        {
            //append the final result after all sub checks have been inserted
            precheckUl.after(result);
        }, (delay*2));
    }
})(0);

​HTML

<div id="precheck">
    <h2>System Check</h2>
    <ul />
</div>
​

AUTHOR: . Find out more about jQuery4u author on Plus.