πŸ”₯ Get a free month of Premium Access. Use code: FREEAUG at checkout

Simulating Delay using jQuery and setTimeout()

Sam Deering
Share

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 = β€˜

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 ​HTML

    System Check

      ​