jquery setTimeout or setInterval

Question

I have the below code with the if condition

if(oldMembership++ <= newMembership) {
    var digit;
    $(\'ul#indexSiteCounterBottom\').empty();

    for(i         


        

Answer 1

setTimeout is a function used to delay the execution of a function

You can use it like:

var to = setTimeout(function() {

    // Your code that will be executed after 500 ms

}, 500);

If you wan to cancel the call before 500ms is elapsed, you can used the to var and call the clearTimout(to). This will cancel the timout and your function will not be run after 500ms.

setInterval is different from the setTimeout because it will run your function every 500ms without any action. It can be viewed as a scheduler.

You can use it like:

var iv = setInterval(function() {

    // Your code that will be executed every 500ms

}, 500);

If you want to stop the scheduled process, you can use the iv var and call the clearInterval(iv). This will cancel the qscheduler.

In your case, you should use setTimeout if you want to keep a hand on each call.

For example, you could write something like:

// Launch the task if the main test is ok
if(oldMembership++ <= newMembership) {

    // Empty your main UL
    $('ul#indexSiteCounterBottom').empty();

    // Run the first process without timeout
    runProcess(0, 500);
}

// Run one process
function runProcess(i, ms)
{
    // Stop the recursivity when the end of the string is reached
    if (i >= membership.toString().length)
        return;

    // Set default value for the digit
    var digit = membership.toString()[i];

    // Override the digit if requiered
    if(digit == '_')
        digit = '&nbsp;';

    // Finally process the digit
    $('ul#indexSiteCounterBottom').append('<li>'+digit+'</li>');
    $('ul#indexSiteCounterBottom li:nth-child(3n)').addClass('extra-margin');

    // Run the next process in 500ms
    setTimout(function() {
        runProcess(i+1, ms);
    }, ms);
}

Answer 2

if(membership.toString()[i] == '_') {
    digit = ' ';
    setTimeout(function () {
        digitThing(digit);
    }, 500);
}
else {
    digit = membership.toString()[i];
    digitThing(digit);
}
function digitThing(digit) {
    $('ul#indexSiteCounterBottom').append('<li>'+digit+'</li>');
    $('ul#indexSiteCounterBottom li:nth-child(3n)').addClass('extra-margin');
}

Answer 3

I think this can resolve your problem...

function execute_if_membership(){
    setTimeout(function(){
        var digit;
        $('ul#indexSiteCounterBottom').empty();

        for(i = 0; i < 9; i++) {
            if(membership.toString()[i] == '_') {
                digit = '&nbsp;';
            } else {
                digit = membership.toString()[i];
            }

            $('ul#indexSiteCounterBottom').append('<li>'+digit+'</li>');
            $('ul#indexSiteCounterBottom li:nth-child(3n)').addClass('extra-margin');
        }

        // Execute again if needed
        if(oldMembership++ <= newMembership) {execute_if_membership();}
        else{ /* what to do else? maybe call another function */ }
    },500);
}

// execute by the first time
if(oldMembership++ <= newMembership) {execute_if_membership();}

 

EDIT: With this code you call the function by the first time. Function wait 500 ms and execute, in the final of the function, it checks if need to call another time (loop) and if needed it executes again. If you want to execute some code after that, you need to put it inside the ELSE of condition, because if you put another code below, it will be executed without wait. That's because setTimeout and setInterval makes the code asynchronous and continues to execute the code.