24

I have a javascript file, and in several places I want to add a small delay, so the script would reach that point, wait 3 seconds, and then continue with the rest of the code. The best way that I thought of doing this was to create a function, which I could call from anywhere in the script.

function startDelay(lengthOfDelay)
{
//code to make it delay for lengthOfDelay amount of time
}

However, I can not find any way to implement the code to make it wait. I had a look at setTimeout, but you needed to hard code the function into it, which made it no good for me.

Is there any way that I can get the script to juct pause for a few seconds? I have no problem with the UI freezing whilst the code is paused.

If not, is there a way that I could use the PHP sleep() to achieve this? (I know that PHP is server side and Javascript is client side, but maybe there is a way that I have not heard of.)

user2370460
  • 6,320
  • 7
  • 27
  • 40
  • 2
    The simplest way is to use [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/window.setTimeout) and to do the remaining of your code in the function you give to setTimeout. – Denys Séguret Jun 01 '13 at 14:49
  • 1
    http://stackoverflow.com/questions/10312963/javascript-settimeout – Dallas Jun 01 '13 at 14:50

3 Answers3

60

You do not need to use an anonymous function with setTimeout. You can do something like this:

setTimeout(doSomething, 3000);

function doSomething() {
   //do whatever you want here
}
Kassem
  • 7,574
  • 16
  • 69
  • 113
  • 1
    How would I create a function such as startDelay(lengthOfDelay) that I could call from **anywhere** in the script and have it do the rest of the code afterwards, not just _//do whatever you want here_? – user2370460 Jun 01 '13 at 14:59
  • I'm not really sure what you want to do exactly. Do you want to halt the execution of the page or schedule a function that will execute after a delay? – Kassem Jun 01 '13 at 15:27
  • @Kassem I think (s)he means e.g. what if you want to console.log a message every second using a for loop? i.e. `while(true){ [a delay function, incorporating console.log]}` I don't think your function will run sequentially. – geotheory Jul 15 '14 at 14:52
  • Didn't work for me the first time, but the following solved my problem: setTimeout(function() { doSomething(); }, 3000); – Sander Jul 22 '15 at 07:28
3

Ah yes. Welcome to Asynchronous execution.

Basically, pausing a script would cause the browser and page to become unresponsive for 3 seconds. This is horrible for web apps, and so isn't supported.

Instead, you have to think "event-based". Use setTimeout to call a function after a certain amount of time, which will continue to run the JavaScript on the page during that time.

DanRedux
  • 7,925
  • 5
  • 20
  • 41
-1

You can create a delay using the following example

setInterval(function(){alert("Hello")},3000);

Replace 3000 with # of milliseconds

You can place the content of what you want executed inside the function.

CBC_NS
  • 1,811
  • 4
  • 22
  • 41
  • 13
    This answer is slightly lacking (I think) because setInterval will continue to run every 3 seconds, not just once. – Adam Davis Aug 22 '14 at 20:40
  • @AdamDavis I've tested this method and I haven't experienced any problems. Should you or someone else test this and demonstrate otherwise let the community know. Thanks – CBC_NS Aug 26 '14 at 22:50
  • 1
    @CBC_NS I just tried it out and I also had it repeating every 3 seconds. Handy to keep in mind though. – Trevor Wood Sep 10 '14 at 18:30
  • 3
    This answer is wrong. The original post states, "I want to add a small delay, so the script would reach that point, wait 3 seconds, and then continue with the rest of the code." This code will continually call the declared function every n milliseconds until a clearInterval is set. This could have very bad unintended consequences. – thefreeline Jan 05 '15 at 21:00
  • just replace setInterval with setTimeout and it works as intended – prinsen Nov 25 '16 at 10:48