Simulating Delay using jQuery and setTimeout()

Sam Deering

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.



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=""/></li>',
    '<li class="orange">System <img src=""/></li>',
    '<li class="green">Device <img src=""/></li>',
    '<li class="green">Browser <img src=""/></li>',
    '<li class="green">Flash <img src=""/></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=""/></li>'),
        sysPreId = "syspre_"+el_index;
  //show loading image
  //after simulated delay replace loading image with sub check result
  setTimeout( function()
  }, 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);
            //append the final result after all sub checks have been inserted
        }, (delay*2));


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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.