How to wait for a period of time after a function run

Question

If I have a function which I would like my js code to run it immediately but after the run, wait for 2 seconds. How to achieve this logic?

(Note: It is just the inverse logic compare with setTimeout(), since setTimeout() first wait a certain amount of time then execute the function.)

Solution 1

Just put your code inside an anonymous function passed to setTimeout.

e.g.

functionToRunFirst();
setTimeout(function() {
    // rest of code here
}, 2000);

Solution 2

I think what you're looking for is a method to suspend the execution of the code until a timeout. Many amateur programmers wish for such a construct, but it doesn't exist in JavaScript. It's not needed. For all purposes in JavaScript setTimeout and setInterval are perfect candidate solutions.

However, JavaScript is a powerful language. You can build your own construct to address this issue. Take a look at Neil Mix's blog post. With his approach you can create a sleep function which can be used along the following lines (note that currently only Firefox supports JavaScript 1.7):

function mainGeneratorFunction() {
    functionToRunFirst();
    yield sleep(2000);
    //rest of the code
}

However, for other browsers don't despair. You can use a hack known as XHR Sleeping. In this approach you simply use a synchronous XMLHttpRequest to call a server side script like php, which then sleeps for the specified time and returns after it wakes up. The JavaScript code is as follows:

function sleep(microseconds) {
    var request = new XMLHttpRequest();
    request.open("GET", "sleep.php?time=" + microseconds, false);
    request.send();
}

functionToRunFirst();
sleep(2000000);
//rest of the code

The php sleep function is as follows:

<?php
    usleep($_GET["time"]);
?>

Solution 3

using setTimeout is one way to do it

function run() {    
    // run this code

    setTimeout(afterTwoSeconds, 2000);    
}

function afterTwoSeconds() {    
    // run this code two seconds after executing run.   
}

// call run
run();

Solution 4

Nothing wrong with the answers above, but a different way is:

$("#somethingThatDoesntExist").fadeTo(2000, 1, function() {
    // two seconds later
});

Solution 5

given some filling out on your part, this should run 5 times with half a second timer

var counter = 0;
var arrayOfPicture = []; //fill this out

function gifSimulator() {

    //use the counter as an index in the array, and change the image source of your element with that.


    if (counter < 5) {

        setTimeout(function () {

            counter++;

            gifSimlulator();

        }, 500); //lets wait half a second
    }
}

View more solutions

Comments

[Arthur Halma]

Can you please give a few lines of your code? I think you looking for .delay() but not sure for now.

[Didier Ghys]

Well, i guess you have to wait 2s before doing something else. Use the setTimeout() for that something else then, after you executed your function ;-)

[Rohan]

seems you want to wait for 2s before you return to the calling function. if yes, then before returning use setTimeout()

[Madara's Ghost]

@Rohan setTimeout() is async, the timeout will be set and the code will continue regardless. 2 seconds later, the action will be preformed, but not in order with the rest of the script.

[Rohan]

@Truth: good to know. thanks :)

[Madara's Ghost]

That's rather hackish of you. Why not .delay() if jquery is your choice?

[Grim...]

Because I didn't know about .delay(), thanks! I also thought the OP mentioned jQuery, but I seem to be wrong.

[Madara's Ghost]

He did tag his question jquery.