How to pause javascript code execution for 2 seconds

Question

I want to stop execution for 2 seconds. So is this, but now follows a code block:

<html>
   <head>
      <title> HW 10.12 </title>
      <script type="text/javascript">
         for (var i = 1; i <= 5; i++) {
             document.write(i);
             sleep(2); //for the first time loop is excute and sleep for 2 seconds        
         };
      </script>
   </head>
   <body></body>
</html>

For the first time loop is excute and sleep for 2 seconds. I want to stop execution for two seconds?

for (var i = 1; i <=5; i++) { document.write(i); sleep(4); } — abdullah sheikh, May 18 '13 at 11:41
Why do you want to pause execution for two, or any number of, seconds? — David says reinstate Monica, May 18 '13 at 11:43
http://stackoverflow.com/questions/1183872/put-a-delay-in-javascript?answertab=oldest#tab-top — Ketan Modi, May 18 '13 at 11:52
The big mix up here is that you used the term "stop" when you really wanted to use "sleep" - that's why this is a duplicate question. For those who really want a stop, your best bet is a stepper that runs over and over until the delay is reached. I'd post the code but this answer is closed. — Jacksonkr, Sep 27 '18 at 23:43

Khanh TO · Answer 1 · 2018-03-31T09:49:39.897

132

Javascript is single-threaded, so by nature there should not be a sleep function because sleeping will block the thread. setTimeout is a way to get around this by posting an event to the queue to be executed later without blocking the thread. But if you want a true sleep function, you can write something like this:

function sleep(miliseconds) {
   var currentTime = new Date().getTime();

   while (currentTime + miliseconds >= new Date().getTime()) {
   }
}

Note: The above code is NOT recommended.

edited Mar 31 '18 at 09:49

answered May 18 '13 at 12:11

Khanh TO

46,783
12
97
112

24

**DONT LIKE THAT!!!** That causes WHOLE TAB freeze (also other tabs affected too) during that time , because `while` command is being executed unlimited times by CPU, causing to freeze. See practical example - https://jsfiddle.net/mn6yagqx/ (test yourself) – T.Todua Dec 20 '17 at 17:45
29

@T.Todua: That's why the post did not recommend it. This is just a workaround in case people want to do it anyway – Khanh TO Dec 23 '17 at 02:36
2

I wonder how many people have used this block of code already without looking at the comment of @T.Todua – Khan Shahrukh Jul 19 '18 at 12:57
7

This was useful to simulate a very busy Web Worker, so I could confirm how messages get queued and processed when the worker is busy. – whitehat101 Oct 07 '18 at 22:01
1

Still useful to introduce a temporary delay for debugging mocha tests, for example. – demisx Mar 03 '19 at 17:36
Should write a comment above the code block not to use this piece of code – Guillaume A. Jul 30 '19 at 08:03

James McLaughlin · Answer 2 · 2013-05-18T11:52:03.310

64

There's no (safe) way to pause execution. You can, however, do something like this using setTimeout:

function writeNext(i)
{
    document.write(i);

    if(i == 5)
        return;

    setTimeout(function()
    {
        writeNext(i + 1);

    }, 2000);
}

writeNext(1);

edited May 18 '13 at 11:52

answered May 18 '13 at 11:45

James McLaughlin

18,363
2
45
56

4

Why document.write() it will screw up the DOM – Manu Viswam Nov 24 '14 at 09:09
52

@ManuViswam It's not my document.write, that's the code from the question. – James McLaughlin Nov 24 '14 at 09:42

score 40 · Answer 3 · edited Mar 28 '21 at 00:53

40

You can use setTimeout to do this

function myFunction() {
    // your code to run after the timeout
}

// stop for sometime if needed
setTimeout(myFunction, 2000);

edited Mar 28 '21 at 00:53

Serge Stroobandt

19,748
8
84
81

answered May 18 '13 at 11:44

Sachin

37,535
7
82
97

Why are you passing myFunction as a callback? – VSO Jul 05 '18 at 18:34
@VSO The syntax is incorrect. The `setTimeout` would need to be after the `{` before this would even work. – Jacksonkr Sep 27 '18 at 23:40

score 5 · Answer 4 · edited May 23 '17 at 12:02

5

This Link might be helpful for you.

Every time I've wanted a sleep in the middle of my function, I refactored to use a setTimeout().

edited May 23 '17 at 12:02

Community

1
1

answered May 18 '13 at 11:48

Saman Gholami

3,093
5
28
63

score 3 · Answer 5 · answered May 18 '13 at 11:54

There's no way to stop execution of your code as you would do with a procedural language. You can instead make use of setTimeout and some trickery to get a parametrized timeout:

for (var i = 1; i <= 5; i++) {
    var tick = function(i) {
        return function() {
            console.log(i);
        }
    };
    setTimeout(tick(i), 500 * i);
}

Demo here: http://jsfiddle.net/hW7Ch/

How to pause javascript code execution for 2 seconds

5 Answers5

Linked