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.

Demo

jQuery Code Recursive setTimeout()

//data and settings
var result = ‘

Precheck passed.

‘, //html for main result
delay = 500, //delay of sub results
data = Array(
‘

Javascript

‘,
‘

System

‘,
‘

Device

‘,
‘

Browser

‘,
‘

Flash

‘
);

//self executing function starting from array index 0
(function process_els(el_index) {

var el = data[el_index],
precheckUl = $(‘#precheck ul’),
loadingLi = $(‘

‘),
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); [/js]

​HTML

    
System Check
    


​

Meet the author

Sam Deering

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.