How to put a sleep after clicking a button

Question

I would like to put a delay after a button is pressed in order for the button to load the data from the cache before executing the next line of code. Would putting a sleep be the best way to do this?

Something like this or is there an alternative approach to best solve this problem?

setInterval(document.getElementById("generateButton"), 1000);

Try [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout) — Oriol, Aug 28 '14 at 17:38
window.setTimeout(document.getElementById("generateButton"), 1000); like that? — user3767481, Aug 28 '14 at 17:38
`setInterval(...)` is meant for a repeated event (after your delay) - you may be thinking of `setTimeout(...)` for a one-time thing — blurfus, Aug 28 '14 at 17:38
Possible repetitive question, refer here: http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep?rq=1 — daOnlyBG, Aug 28 '14 at 17:39
@user3767481 No, `document.getElementById("generateButton")` is not a function. And I guess you want to do something with that element, instead of only getting it. — Oriol, Aug 28 '14 at 17:44

Blubberguy22 · Accepted Answer · 2014-08-28T17:56:28.523

4

Don't use setInterval to do this. It doesn't have the functionality you seem to desire (it repeats). Instead, use jQuery and do something like this:

$("#generateButton").click(function(event){
    setTimeout(function(){
        //Do what the button normally does
    }, 1000);          
});

Or (without JQuery):

var generateButton = document.getElementById("generateButton");
generateButton.addEventListener("click", function(){
    setTimeout(function(){
        //Do what the button normally does
    }, 1000);
});

Using setTimeout over setInterval is preferred in your case because setTimeout runs only once while setInterval runs multiple times.

I assume you have, in your html, <button id='generateButton' onclick='someFunction()'>Button Text</button>. Remove the onclick='someFunction() and put your someFunction() where I said (in the examples) "Do what the button normally does."

You can also add in the code that loads the cache a method that calls another method once the cache has been loaded (when the someFunction() from the button is called, it loads the cache, and at the end of the function (set this up using callbacks), once the cache has been loaded, it calls another method onCacheLoaded() that can be run once the cache has been loaded.

edited Aug 28 '14 at 17:56

answered Aug 28 '14 at 17:38

Blubberguy22

1,344
1
17
29

Would the second example without Jquery programatically click on the button for me such as document.getElementById("generateButton").click(); – user3767481 Aug 28 '14 at 17:46
No, it would happen when the button is clicked. You should put the code that runs when the button is clicked in the area that says `//Do what the button normally does`. The way you have it set up right now you probably have `onclick='someFunction()'`. Remove that and put the `someFunction()` where `//Do what the button normally does` is. – Blubberguy22 Aug 28 '14 at 17:47
I just want to clarify, this code will automatically press the button for me, then set a delay for 1 second, then after that delay in the "do what the button normally does" I would have my other code that I want to run after the delay – user3767481 Aug 28 '14 at 17:50
The code does not automatically press the button for you, it sets up code to do things when the button is pressed (the `$("#generateButton").click(function(event){//Code to be executed on click});` and `generateButton.addEventListener("click", function(){//Code to be executed on click});` setup the functions/code to be run when a user clicks the specified button). – Blubberguy22 Aug 28 '14 at 17:52

score 1 · Answer 2 · answered Aug 28 '14 at 17:41

You should use callbacks, so the moment you loaded data from cache you can call it and continue executing the rest of the script. You cannot use interval since you cannot be sure how much time is needed for the data to load. Though keep in mind the asynchronous nature of javascript and don't block the part of the script that does not depend on the data that's being loaded.

score 0 · Answer 3 · answered Aug 28 '14 at 17:41

0

Try setTimeout:

myButton.addEventListener('click', function() {
    setTimeout(delayed, 1e3); // Delay code
}, false);
function delayed() {
    // Do whatever
}

Note setInterval runs a function periodically, setTimeout only once.

Also note that the delayed code must be a function (or a string which will be evaluated, but better avoid that). However, document.getElementById("generateButton") returns an html element (or null).

answered Aug 28 '14 at 17:41

Oriol

274,082
63
437
513

in the delayed() I would programmatically click the button as so : document.getElementById("generateButton").click(); – user3767481 Aug 28 '14 at 17:43

How to put a sleep after clicking a button

3 Answers3