How to set time delay in javascript

Question

I have this a piece of js in my website to switch images but need a delay when you click the image a second time  The delay should be 1000ms  So you would click the img jpg then the img onclick jpg would appear  You would then click the img onclick jpg image there should then be a delay of 1000ms before the img jpg is shown again    Here is the code   jQuery document  ready function               toggle-container   hide            trigger   toggle function                this  addClass  active                trigger   find  img   prop  src    http   localhost 8888 images img onclick jpg           function                this  removeClass  active                trigger   find  img   prop  src    http   localhost 8888 images img jpg                    trigger   click function                this  next   toggle-container   slideToggle

User · Answer

I ll give my input because it helps me understand what im doing   To make an auto scrolling slide show that has a 3 second wait I did the following   var isPlaying   true   function autoPlay playing      var delayTime   3000     var timeIncrement   3000      if playing           for var i 0  i lt 6  i      I have 6 images             setTimeout nextImage  delayTime               delayTime    timeIncrement                    isPlaying   false       else         alert  auto play off            autoPlay isPlaying     Remember that when executing setTimeout   like this  it will execute all time out functions as if they where executed at the same time assuming that in setTimeout nextImage  delayTime  delay time is a static 3000 milliseconds   What I did to account for this was add an extra 3000 milli s after each for loop incrementation via delayTime    timeIncrement      For those who care here is what my nextImage   looks like   function nextImage        if currentImg     1    change to img 2         for var i 0  i lt 6  i                 images i  style zIndex    0                     images 1  style zIndex    1           imgNumber innerHTML   imageNumber Text 1           imgDescription innerHTML   imgDescText 1            currentImg   2            else if currentImg     2    change to img 3         for var i 0  i lt 6  i                 images i  style zIndex    0                     images 2  style zIndex    1           imgNumber innerHTML   imageNumber Text 2           imgDescription innerHTML   imgDescText 2            currentImg   3            else if currentImg     3    change to img 4         for var i 0  i lt 6  i                 images i  style zIndex    0                     images 3  style zIndex    1           imgNumber innerHTML   imageNumber Text 3           imgDescription innerHTML   imgDescText 3            currentImg   4            else if currentImg     4    change to img 5         for var i 0  i lt 6  i                 images i  style zIndex    0                     images 4  style zIndex    1           imgNumber innerHTML   imageNumber Text 4           imgDescription innerHTML   imgDescText 4            currentImg   5            else if currentImg     5    change to img 6     for var i 0  i lt 6  i                 images i  style zIndex    0                     images 5  style zIndex    1           imgNumber innerHTML   imageNumber Text 5           imgDescription innerHTML   imgDescText 5            currentImg   6            else if currentImg     6    change to img 1         for var i 0  i lt 6  i                 images i  style zIndex    0                     images 0  style zIndex    1           imgNumber innerHTML   imageNumber Text 0           imgDescription innerHTML   imgDescText 0            currentImg   1

User · Answer

There are two  mostly used  types of timer function in javascript setTimeout and setInterval  other    Both these methods have same signature  They take a call back function and delay time as parameter   setTimeout executes only once after the delay whereas setInterval keeps on calling the callback function after every delay milisecs   both these methods returns an integer identifier that can be used to clear them before the timer expires   clearTimeout and clearInterval both these methods take an integer identifier returned from above functions setTimeout and setInterval  Example   setTimeout  alert  before setTimeout     setTimeout function            alert  I am setTimeout         1000     delay is in milliseconds     alert  after setTimeout      If you run the the above code you will see that it alerts before setTimeout and then after setTimeout finally it alerts I am setTimeout after 1sec  1000ms   What you can notice from the example is that the setTimeout      is asynchronous which means it doesn t wait for the timer to get elapsed before going to next statement i e alert  after setTimeout     Example   setInterval  alert  before setInterval      called first   var tid   setInterval function              called 5 times each time after one second           before getting cleared by below timeout           alert  I am setInterval         1000     delay is in milliseconds     alert  after setInterval      called second  setTimeout function         clearInterval tid     clear above interval after 5 seconds   5000     If you run the the above code you will see that it alerts before setInterval and then after setInterval finally it alerts I am setInterval  5 times after 1sec  1000ms  because the setTimeout clear the timer after 5 seconds or else every 1 second you will get alert I am setInterval Infinitely   How browser internally does that   I will explain in brief   To understand that you have to know about event queue in javascript  There is a event queue implemented in browser  Whenever an event get triggered  in js  all of these events  like click etc     are added to this queue   When your browser has nothing to execute it takes an event from queue and executes them one by one    Now   when you call setTimeout or setInterval your callback get registered to an timer in browser and it gets added to the event queue after the given time expires and eventually javascript takes the event from the queue and executes it    This happens so   because javascript engine are single threaded and they can execute only one thing at a time  So   they cannot execute other javascript and keep track of your timer  That is why these timers are registered with browser  browser are not single threaded  and it can keep track of timer and add an event in the queue after the timer expires   same happens for setInterval only in this case the event is added to the queue again and again after the specified interval until it gets cleared or browser page refreshed           Note      The delay parameter you pass to these functions is the minimum delay   time to execute the callback  This is because after the timer expires   the browser adds the event to the queue to be executed  by the   javascript engine but the execution of the callback depends upon your   events position in the queue and as the engine is single threaded it   will execute all the events in the queue one by one    Hence  your callback may sometime take more than the specified delay time to be called specially when your other code blocks the thread and not giving it time to process what s there in the queue   And as I mentioned javascript is single thread  So   if you block the thread for long    Like this code  while true      infinite loop      Your user may get a message saying page not responding

User · Answer

you can use of promise function sleep ms      return new Promise resolve   gt  setTimeout resolve  ms       use console log  quot Hello quot    sleep 2000  then      gt    console log  quot World  quot         or console log  quot Hello quot    await sleep 2000   console log  quot World  quot

User · Answer

For sync calls you can use the method below   function sleep milliseconds      var start   new Date   getTime      for  var i   0  i  lt  1e7  i          if   new Date   getTime   - start   gt  milliseconds         break

User · Answer

ES-6 Solution Below is a sample code which uses aync await to have an actual delay  There are many constraints and this may not be useful  but just posting here for fun    x000D   x000D  function delay delayInms      return new Promise resolve   gt        setTimeout      gt          resolve 2          delayInms            async function sample       console log  a      console log  waiting        let delayres   await delay 3000     console log  b      sample    x000D   x000D   x000D

User · Answer

Use setTimeout     var delayInMilliseconds   1000    1 second  setTimeout function         your code to be executed after 1 second    delayInMilliseconds     If you want to do it without setTimeout  Refer to this question

User · Answer

Here is what I am doing to solve this issue  I agree this is because of the timing issue and needed a pause to execute the code   var delayInMilliseconds   1000   setTimeout function        add your code here to execute     delayInMilliseconds     This new code will pause it for 1 second and meanwhile run your code

User · Answer

If you need refresh  this is another posibility    setTimeout function               jsSegurosProductos   jsGrid  refresh        1000

User · Answer

setTimeout function         500      Place your code inside of the      500   0 5 seconds  2200   2 2 seconds  etc

[javascript] How to set time delay in javascript

Examples related to javascript

Examples related to jquery