How do I add a delay in a JavaScript loop

Question

I would like to add a delay sleep inside a while loop   I tried it like this   alert  hi     for var start   1  start  lt  10  start        setTimeout function          alert  hello         3000       Only the first scenario is true  after showing alert  hi    it will be waiting for 3 seconds then alert  hello   will be displayed but then alert  hello   will be repeatedly constantly    What I would like is that after alert  hello   is shown 3 seconds after alert  hi   then it needs to wait for 3 seconds for the second time alert  hello   and so on

User · Answer

This script works for most things  function timer start        setTimeout function        The timer         alert  hello           start 3000     needs the  start   or else all the timers will run at 3000ms    for var start   1  start  lt  10  start          timer start

User · Answer

Here is how I created an infinite loop with a delay that breaks on a certain condition        Now continuously check the app status until it s completed        failed or times out  The isFinished   will throw exception if      there is a failure    while  true        let status   await this api getStatus appId       if  isFinished status           break        else            Delay before running the next loop iteration        await new Promise resolve   gt  setTimeout resolve  3000                The key here is to create a new Promise that resolves by timeout  and to await for its resolution    Obviously you need async await support for that  Works in Node 8

User · Answer

Since ES7 theres a better way to await a loop     Returns a Promise that resolves after  quot ms quot  Milliseconds const timer   ms   gt  new Promise res   gt  setTimeout res  ms    async function load         We need to wrap the loop into an async function for this to work   for  var i   0  i  lt  3  i          console log i       await timer 3000      then the created Promise can be awaited        load     When the engine reaches the await part  it sets a timeout and halts the execution of the async function  Then when the timeout completes  execution continues at that point  That s quite useful as you can delay  1  nested loops   2  conditionally   3  nested functions   x000D   x000D  async function task i       3   await timer 1000     console log  Task   i  done        async function main       for let i   0  i  lt  100  i   10        for let j   0  j  lt  10  j         1       if j   2       2         await task i   j                            main     function timer ms    return new Promise res   gt  setTimeout res  ms      x000D   x000D   x000D   Reference on MDN While ES7 is now supported by NodeJS and modern browsers  you might want to transpile it with BabelJS so that it runs everywhere

User · Answer

I would probably use setInteval  Like this   var period   1000     ms var endTime   10000      ms var counter   0  var sleepyAlert   setInterval function        alert  Hello        if counter     endTime          clearInterval sleepyAlert             counter    period     period

User · Answer

The setTimeout   function is non-blocking and will return immediately  Therefore your loop will iterate very quickly and it will initiate 3-second timeout triggers one after the other in quick succession  That is why your first alerts pops up after 3 seconds  and all the rest follow in succession without any delay   You may want to use something like this instead    x000D   x000D  var i   1                       set your counter to 1 x000D   x000D  function myLoop                 create a loop function x000D    setTimeout function           call a 3s setTimeout when the loop is called x000D      console log  hello          your code here x000D      i                           increment the counter x000D      if  i  lt  10                  if the counter  lt  10  call the loop function x000D        myLoop                        again which will trigger another  x000D                                      setTimeout   x000D       3000  x000D    x000D   x000D  myLoop                          start the loop x000D   x000D   x000D    You could also neaten it up  by using a self invoking function  passing the number of iterations as an argument    x000D   x000D   function myLoop i    x000D    setTimeout function     x000D      console log  hello        your code here                 x000D      if  --i  myLoop i         decrement i and call myLoop again if i  gt  0 x000D       3000  x000D     10                         pass the number of iterations as an argument x000D   x000D   x000D

User · Answer

Try something like this   x000D   x000D  var i   0  howManyTimes   10   function f       console log  hi      i      if  i  lt  howManyTimes        setTimeout f  3000          f    x000D   x000D   x000D

User · Answer

x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt body gt  x000D   x000D   lt button onclick  myFunction    gt Try it lt  button gt  x000D   x000D   lt p id  demo  gt  lt  p gt  x000D   x000D   lt script gt  x000D  function myFunction     x000D      for var i 0  i lt 5  i      x000D       var sno   i 1  x000D           function myLoop  i              x000D               setTimeout function         x000D                alert i      Do your function here  x000D                  1000 i   x000D             sno   x000D        x000D    x000D   lt  script gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I do this with Bluebird   s Promise delay and recursion    x000D   x000D  function myLoop i    x000D    return Promise delay 1000  x000D       then function     x000D        if  i  gt  0    x000D          alert  hello    x000D          return myLoop i -  1   x000D          x000D          x000D    x000D   x000D  myLoop 3   x000D   lt script src    cdnjs cloudflare com ajax libs bluebird 2 9 4 bluebird min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

This will work  for  var i   0  i  lt  10  i         function i        setTimeout function     console log i      100   i        i       Try this fiddle  https   jsfiddle net wgdx8zqq

User · Answer

let counter  1     for let item in items            counter            setTimeout     gt               your code           counter 5000     5Sec delay between each iteration

User · Answer

Here is a function that I use for looping over an array   function loopOnArrayWithDelay theArray  delayAmount  i  theFunction  onComplete        if  i  lt  theArray length  amp  amp  typeof delayAmount     number             console log  i   i            theFunction theArray i   i            setTimeout function                 loopOnArrayWithDelay theArray  delayAmount   i 1   theFunction  onComplete    delayAmount        else           onComplete i             You use it like this   loopOnArrayWithDelay YourArray  1000  0  function e  i         Do something with item    function i         Do something once loop has completed

User · Answer

x000D   x000D      var startIndex   0  x000D      var data    1  2  3   x000D      var timeout   1000  x000D   x000D      function functionToRun i  length    x000D        alert data i    x000D        x000D   x000D       function forWithDelay i  length  fn  delay    x000D        setTimeout function     x000D          fn i  length   x000D          i    x000D          if  i  lt  length    x000D            forWithDelay i  length  fn  delay   x000D            x000D           delay   x000D         startIndex  data length  functionToRun  timeout   x000D   x000D   x000D    A modified version of Daniel Vassallo s answer  with variables extracted into parameters to make the function more reusable   First let s define some essential variables   var startIndex   0  var data    1  2  3   var timeout   3000    Next you should define the function you want to run  This will get passed i  the current index of the loop and the length of the loop  in case you need it   function functionToRun i  length        alert data i        Self-executing version   function forWithDelay i  length  fn  delay       setTimeout function            fn i  length         i          if  i  lt  length             forWithDelay i  length  fn  delay                 delay      startIndex  data length  functionToRun  timeout     Functional version  function forWithDelay i  length  fn  delay       setTimeout function            fn i  length         i          if  i  lt  length             forWithDelay i  length  fn  delay                 delay      forWithDelay startIndex  data length  functionToRun  timeout      Lets run it

User · Answer

Just thought I d post my two cents here as well  This function runs an iterative loop with a delay  See this jsfiddle  The function is as follows   function timeout range  time  callback       var i   range 0                       callback i       Loop        function Loop            setTimeout function                i                if  i lt range 1                    callback i                   Loop                             time 1000             For example     This function prints the loop number every second timeout  0  5   1  function i       console log i         Would be equivalent to     This function prints the loop number instantly for  var i   0  i lt 5  i         console log i

User · Answer

A function-less solution I am a bit late to the party  but there is a solution without using any functions  alert  hi     for var start   1  start  lt  10  start        setTimeout      gt  alert  hello    3000   start

User · Answer

var count   0     Parameters      array         fnc  function  the business logic in form of function- what you want to execute      delay  milisecond    function delayLoop array fnc delay       if  array    array legth    0 return false      setTimeout function data            var data   array count             fnc  amp  amp  fnc data             recursion            if count  lt  array length              delayLoop array fnc delay           else count   0             delay

User · Answer

If using ES6  you could use a for loop to achieve this   x000D   x000D  for  let i   1  i  lt  10  i        setTimeout function timer         console log  hello world         i   3000     x000D   x000D   x000D   It declares i for each iteration  meaning the timeout is what it was before   1000  This way  what is passed to setTimeout is exactly what we want

User · Answer

Just try this   var arr     A   B   C      function customLoop  arr  i        setTimeout function             Do here what you want to do            console log arr i        if  --i                          customLoop arr  i               2000      arr  arr length     Result  A    after 2s B    after 2s C    after 2s

User · Answer

Another way is to multiply the time to timeout  but note that this is not like sleep  Code after the loop will be executed immediately  only the execution of the callback function is deferred   for  var start   1  start  lt  10  start        setTimeout function      alert  hello        3000   start     The first timeout will be set to 3000   1  the second to 3000   2 and so on

User · Answer

You can use RxJS interval operator  Interval emits integer every x number of seconds  and take is specify number of times it has to emit numberss   x000D   x000D  Rx Observable x000D     interval 1000  x000D     take 10  x000D     subscribe  x    gt  console log x   x000D   lt script src  https   cdnjs cloudflare com ajax libs rxjs 4 1 0 rx lite min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

In ES6 you can do as following    x000D   x000D   for  let i   0  i  lt   10  i            x000D       setTimeout function         x000D          console log i   x000D          i 3000  x000D     x000D   x000D   x000D    In ES5 you can do as    x000D   x000D  for  var i   0  i  lt   10  i     x000D      function i              x000D       setTimeout function         x000D          console log i   x000D          i 3000  x000D        i     x000D     x000D   x000D   x000D    The reason is  let allows you to declare variables that are limited to a scope of a block statement  or expression on which it is used  unlike the var keyword  which defines a variable globally  or locally to an entire function regardless of block scope

User · Answer

for common use  forget normal loops  and use this combination of  setInterval  includes  setTimeOut s  like this  from my real tasks            function iAsk lvl               var i 0              var intr  setInterval function       start the loop                  i       increment it                 if i gt lvl      check if the end round reached                      clearInterval intr                       return                                    setTimeout function                            imag   prop  src  pPng      do first bla bla bla after 50 millisecond                   50                   setTimeout function                            do another bla bla bla after 100 millisecond                      seq i-1   Math ceil Math random   4   toString                            hh   after   lt br gt   i       rand     Math ceil Math random   4   toString      gt    seq i-1                            d  seq i-1   prop  src  pGif                       var d  document getElementById  aud                        d play                                         100                   setTimeout function                           keep adding bla bla bla till you done                            d  seq i-1   prop  src  pPng                     900                 1000      loop waiting time must be  gt   900  biggest timeOut for inside actions              PS  Understand that the real behavior of  setTimeOut   they all will start in same time  the three bla bla bla will start counting down in the same moment  so make a different timeout to arrange the execution   PS 2  the example for timing loop  but for a reaction loops you can use events  promise async await

User · Answer

In my opinion  the simpler and most elegant way to add a delay in a loop is like this  names     John    Ana    Mary     names forEach  name  i    gt     setTimeout      gt      console log name       i   1000       one sec interval

User · Answer

In ES6  ECMAScript 2015  you can iterate with delay with generator and interval      Generators  a new feature of ECMAScript 6  are functions that can be   paused and resumed  Calling genFunc does not execute it  Instead  it   returns a so-called generator object that lets us control genFunc   s   execution  genFunc   is initially suspended at the beginning of its   body   The method genObj next   continues the execution of genFunc    until the next yield     Exploring ES6     Code example   x000D   x000D  let arr    1  2  3   b    x000D  let genObj   genFunc    x000D   x000D  let val   genObj next    x000D  console log val value   x000D   x000D  let interval   setInterval      gt    x000D    val   genObj next    x000D     x000D    if  val done    x000D      clearInterval interval   x000D      else   x000D      console log val value   x000D      x000D     1000   x000D   x000D  function  genFunc     x000D    for let item of arr    x000D      yield item  x000D      x000D    x000D   x000D   x000D    So if you are using ES6  that the most elegant way to achieve loop with delay  for my opinion

User · Answer

I think you need something like this   var TimedQueue   function defaultDelay       this queue           this index   0      this defaultDelay   defaultDelay    3000      TimedQueue prototype         add  function fn  delay           this queue push               fn  fn              delay  delay                        run  function index            index    index     0   amp  amp   this index   index           this next               next  function            var self   this           i   this index             at   this queue i            next   this queue this index          if  at  return          at fn            next  amp  amp  setTimeout function                self next               next delay  this defaultDelay              reset  function            this index   0            Test code   var now    new Date     var x   new TimedQueue 2000    x add function        console log  hey        console log  new Date   - now       x add function        console log  ho        console log  new Date   - now      3000   x add function        console log  bye        console log  new Date   - now        x run      Note  using alerts stalls javascript execution till you close the alert  It might be more code than you asked for  but this is a robust reusable solution

User · Answer

x000D   x000D  function waitforme ms      return new Promise  resolve   gt         setTimeout     gt   resolve       ms                async function printy          for  let i  0  i  lt  10     i             await waitforme 1000         wait for 500 milisecond      console log i         console log  I Ran after the loop finished           printy    x000D   x000D   x000D

User · Answer

In addition to the accepted answer from 10 years ago  with more modern Javascript one can use async await Promise   or generator function to achieve the correct behavior   The incorrect behavior suggested in other answers would be setting series of 3 seconds alerts regardless of  quot accepting quot  the alert   - or finishing the task at hand  Using async await Promise     x000D   x000D  alert  hi      async      gt      for let start   1  start  lt  10  start          await new Promise resolve   gt  setTimeout      gt          alert  hello          resolve           3000              x000D   x000D   x000D   Using a generator function   x000D   x000D  alert  hi     let func    func    function        for let start   1  start  lt  10  start          yield setTimeout      gt          alert  hello          func next           3000             next    x000D   x000D   x000D

User · Answer

Try this    the code will execute in 1 3 5 7 9 seconds later function exec      for var i 0 i lt 5 i        setTimeout function         console log new Date         It s you code       i i 1  1000

User · Answer

You do it    x000D   x000D  console log  hi   x000D  let start   1 x000D  setTimeout function    x000D    let interval   setInterval function    x000D      if start    10  clearInterval interval  x000D      start   x000D      console log  hello   x000D       3000  x000D     3000  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Use Recursive  and setTimeout    call below function will run loop loopFunctionNeedCheck until    conditionCheckAfterRunFn   true  if conditionCheckAfterRunFn    false   delay    reRunAfterMs miliseconds and continue loop   tested code  thanks     function functionRepeatUntilConditionTrue reRunAfterMs  conditionCheckAfterRunFn   loopFunctionNeedCheck        loopFunctionNeedCheck        var result   conditionCheckAfterRunFn          check after run     if   result            setTimeout function                  functionRepeatUntilConditionTrue reRunAfterMs  conditionCheckAfterRunFn  loopFunctionNeedCheck             reRunAfterMs             else  console log  completed  thanks                      if you need call a function after completed add code call callback in here      passing-parameters-to-a-callback-function    From Prototype js  if   Function prototype bind       check if native implementation available     Function prototype bind   function              var fn   this  args   Array prototype slice call arguments               object   args shift            return function                  return fn apply object                args concat Array prototype slice call arguments                            test code   var result   0   console log  --- gt  init result is     result   var functionNeedRun   function  step                  result  step             console log  current result is     result       var checkResultFunction   function          return result  100         call this function will run loop functionNeedRun and delay 500 miliseconds until result 100     functionRepeatUntilConditionTrue 500  checkResultFunction   functionNeedRun bind null  5       result log from console     --- gt  init result is 0 current result is 5 undefined current result is 10 current result is 15 current result is 20 current result is 25 current result is 30 current result is 35 current result is 40 current result is 45 current result is 50 current result is 55 current result is 60 current result is 65 current result is 70 current result is 75 current result is 80 current result is 85 current result is 90 current result is 95 current result is 100 completed  thanks

User · Answer

Try this     var icount 0  for  let i in items       icount icount 1000     new beginCount items i  icount      function beginCount item icount     setTimeout function          new actualFunction item icount        icount      function actualFunction item icount          runs ever 1 second  console log icount

User · Answer

To my knowledge the setTimeout function is called asynchronously  What you can do is wrap the entire loop within an async function and await a Promise that contains the setTimeout as shown   var looper   async function        for  var start   1  start  lt  10  start          await new Promise function  resolve  reject          setTimeout function              console log  iteration      start toString             resolve true            1000                 return true      And then you call run it like so   looper   then function      console log  DONE          Please take some time to get a good understanding of asynchronous programming

User · Answer

Simple implementation of showing a piece of text every two seconds as long the loop is running   for  var i   0  i  lt  foo length  i         setInterval function          console log  I will appear every 2 seconds           2000     break

[javascript] How do I add a delay in a JavaScript loop?

Examples related to javascript

Examples related to loops

Examples related to sleep