JavaScript Infinitely Looping slideshow with delays

Question

How do I make an infinite loop in JavaScript  I m trying to make a slideshow  which I have working  but I can t get it to loop  I can t even get it to loop twice    The code I m using right now is   window onload   function start         slide      function slide         var num   0      for  num 0 num lt  10 num              setTimeout  document getElementById  container   style marginLeft  -600px   3000           setTimeout  document getElementById  container   style marginLeft  -1200px   6000           setTimeout  document getElementById  container   style marginLeft  -1800px   9000           setTimeout  document getElementById  container   style marginLeft  0px   12000             Without the for thing in there  it does go through once  When I put in a for  it either makes Firefox lock up  or just loops once  I m sure this is a really simple thing to do  and even if it has to be loop 1 000 000 times or something instead of infinite  that d work fine for me    Also  I don t want to use jQuery or something that someone else created  I m learning JavaScript  and this is partially to help me learn  and partially because I m trying to make as many HTML5-based systems as I can   EDIT  I think the reason it s freezing is because it executes the code all at once  and then just stores it in a cache or something  What I want it to do is go through this once  then start at the top again  which is what I ve always thought loops where for  In  batch   command prompt  scripting  this could be done with a  GOTO  command  I don t know if there s an equivalent in JS or not  but that s really my goal

User · Answer

you can use requestAnimationFrame   function like in the below   function unlimited          requestAnimationFrame unlimited       console log  arian      unlimited

User · Answer

Expanding on Ender s answer  let s explore our options with the improvements from ES2015     First off  the problem in the asker s code is the fact that setTimeout is asynchronous while loops are synchronous  So the logical flaw is that they wrote multiple calls to an asynchronous function from a synchronous loop  expecting them to execute synchronously   function slide         var num   0      for  num 0 num lt  10 num              setTimeout  document getElementById  container   style marginLeft  -600px   3000           setTimeout  document getElementById  container   style marginLeft  -1200px   6000           setTimeout  document getElementById  container   style marginLeft  -1800px   9000           setTimeout  document getElementById  container   style marginLeft  0px   12000             What happens in reality  though  is that      The loop  simultaneously  creates 44 async timeouts set to execute 3  6  9 and 12 seconds in the future  Asker expected the 44 calls to execute one-after-the-other  but instead  they all execute simultaneously  3 seconds after the loop finishes  container s marginLeft is set to  -600px  11 times  3 seconds after that  marginLeft is set to  -1200px  11 times  3 seconds later   -1800px   11 times    And so on   You could solve this by changing it to   function setMargin margin       return function            document querySelector   container   style marginLeft   margin            function slide         for  let num   0  num  lt   10    num            setTimeout setMargin  -600px       3000    num   1             setTimeout setMargin  -1200px       6000    num   1             setTimeout setMargin  -1800px       9000    num   1             setTimeout setMargin  0px       12000    num   1               But that is just a lazy solution that doesn t address the other issues with this implementation  There s a lot of hardcoding and general sloppiness here that ought to be fixed   Lessons learnt from a decade of experience  As mentioned at the top of this answer  Ender already proposed a solution  but I would like to add on to it  to factor in good practice and modern innovations in the ECMAScript specification   function format str     args       return str split        map part   gt   part            args shift       part   join         function slideLoop margin  selector       const multiplier   -600      let contStyle   document querySelector selector  style       return function            margin     margin   4          contStyle marginLeft   format   px   margin   multiplier            function slide             return setInterval slideLoop 0    container    3000       Let s go over how this works for the total beginners  note that not all of this is directly related to the question    format  function format   It s immensely useful to have a printf-like string formatter function in any language  I don t understand why JavaScript doesn t seem to have one   format str     args        is a snazzy feature added in ES6 that lets you do lots of stuff  I believe it s called the spread operator  Syntax     identifier or    array  In a function header  you can use it to specify variable arguments  and it will take every argument at and past the position of said variable argument  and stuff them into an array  You can also call a function with an array like so  args    1  2  3   i take 3 args    args   or you can take an array-like object and transform it into an array     document querySelectorAll  div someclass   forEach       This would not be possible without the spread operator  because querySelectorAll returns an  element list   which isn t a true array   str split          I m not good at explaining how regex works  JavaScript has two syntaxes for regex  There s the OO way  new RegExp  regex    gi    and there s the literal way   insert regex here gi   I have a profound hatred for regex because the terse syntax it encourages often does more harm than good  and also because they re extremely non-portable   but there are some instances where regex is helpful  like this one  Normally  if you called split with     or      the resulting array would exclude the     delimiters from the array  But for the algorithm used here  we need them included        was the first thing I tried and it worked  Lucky guess  I suppose    map        map is a functional idiom  You use map to apply a function to a list  Syntax  array map function   Function  must return a value and take 1-2 arguments  The first argument will be used to hold each value in the array  while the second will be used to hold the current index in the array  Example   1 2 3 4 5  map x   gt  x   x      returns  1 4 9 16 25   See also  filter  find  reduce  forEach   part   gt        This is an alternative form of function  Syntax  argument-list   gt  return-value  e g   x  y    gt   y   width   x   which is equivalent to function x  y  return  y   width   x       part            args shift       part    The    operator pair is a 3-operand operator called the ternary conditional operator  Syntax  condition   if-true   if-false  although most people call it the  ternary  operator  since in every language it appears in  it s the only 3-operand operator  every other operator is binary      amp  amp         or unary            amp       Fun fact  some languages  and vendor extensions of languages  like GNU C  implement a two-operand version of the    operator with syntax value    fallback  which is equivalent to value   value   fallback  and will use fallback if value evaluates to false  They call it the Elvis Operator   I should also mention the difference between an expression and an expression-statement  as I realize this may not be intuitive to all programmers  An expression represents a value  and can be assigned to an l-value  An expression can be stuffed inside parentheses and not be considered a syntax error  An expression can itself be an l-value  although most statements are r-values  as the only l-value expressions are those formed from an identifier or  e g  in C  from a reference pointer  Functions can return l-values  but don t count on it  Expressions can also be compounded from other  smaller expressions   1  2  3  is an expression formed from three r-value expressions joined by two comma operators  The value of the expression is 3  expression-statements  on the other hand  are statements formed from a single expression    somevar is an expression  as it can be used as the r-value in the assignment expression-statement newvar     somevar   the value of the expression newvar     somevar  for example  is the value that gets assigned to newvar     somevar  is also an expression-statement   If ternary operators confuse you at all  apply what I just said to the ternary operator  expression   expression   expression  Ternary operator can form an expression or an expression-statement  so both of these things   smallest    a  lt  b     a     b    valueA  lt  valueB     backup database       nuke atlantic ocean       are valid uses of the operator  Please don t do the latter  though  That s what if is for  There are cases for this sort of thing in e g  C preprocessor macros  but we re talking about JavaScript here   args shift     Array prototype shift  It s the mirror version of pop  ostensibly inherited from shell languages where you can call shift to move onto the next argument  shift  pops  the first argument out of the array and returns it  mutating the array in the process  The inverse is unshift  Full list   array shift        1 2 3  - gt   2 3   returns 1 array unshift new-element       element       - gt   new-element  element       array pop        1 2 3  - gt   1 2   returns 3 array push new-element            element  - gt        element  new-element    See also  slice  splice   join       Array prototype join string   This function turns an array into a string  Example   1 2 3  join       - gt   1  2  3   slide  return setInterval slideLoop 0    container    3000     First off  we return setInterval s return value so that it may be used later in a call to clearInterval  This is important  because JavaScript won t clean that up by itself  I strongly advise against using setTimeout to make a loop  That is not what setTimeout is designed for  and by doing that  you re reverting to GOTO  Read Dijkstra s 1968 paper  Go To Statement Considered Harmful  to understand why GOTO loops are bad practice   Second off  you ll notice I did some things differently  The repeating interval is the obvious one  This will run forever until the interval is cleared  and at a delay of 3000ms  The value for the callback is the return value of another function  which I have fed the arguments 0 and   container   This creates a closure  and you will understand how this works shortly   slideLoop  function slideLoop margin  selector    We take margin  0  and selector    container   as arguments  The margin is the initial margin value and the selector is the CSS selector used to find the element we re modifying  Pretty straightforward   const multiplier   -600  let contStyle   document querySelector selector  style    I ve moved some of the hard coded elements up  Since the margins are in multiples of -600  we have a clearly labeled constant multiplier with that base value   I ve also created a reference to the element s style property via the CSS selector  Since style is an object  this is safe to do  as it will be treated as a reference rather than a copy  read up on Pass By Sharing to understand these semantics    return function        margin     margin   4      contStyle marginLeft   format   px   margin   multiplier       Now that we have the scope defined  we return a function that uses said scope  This is called a closure  You should read up on those  too  Understanding JavaScript s admittedly bizarre scoping rules will make the language a lot less painful in the long run   margin     margin   4  contStyle marginLeft   format   px   margin   multiplier     Here  we simply increment margin and modulus it by 4  The sequence of values this will produce is 1- gt 2- gt 3- gt 0- gt 1- gt      which mimics exactly the behavior from the question without any complicated or hard-coded logic   Afterwards  we use the format function defined earlier to painlessly set the marginLeft CSS property of the container  It s set to the currnent margin value multiplied by the multiplier  which as you recall was set to -600  -600 - gt  -1200 - gt  -1800 - gt  0 - gt  -600 - gt         There are some important differences between my version and Ender s  which I mentioned in a comment on their answer  I m gonna go over the reasoning now      Use document querySelector css selector  instead of document getElementById id    querySelector was added in ES6  if I m not mistaken  querySelector  returns first found element  and querySelectorAll  returns a list of all found elements  are part of the prototype chain of all DOM elements  not just document   and take a CSS selector  so there are other ways to find an element than just by its ID  You can search by ID   idname   class   classname   relationships  div container div div span  p nth-child even    and attributes  div name   a href https   google com    among other things      Always track setInterval fn  interval  s return value so it can later be closed with clearInterval interval id    It s not good design to leave an interval running forever  It s also not good design to write a function that calls itself via setTimeout  That is no different from a GOTO loop  The return value of setInterval should be stored and used to clear the interval when it s no longer needed  Think of it as a form of memory management      Put the interval s callback into its own formal function for readability and maintainability   Constructs like this  setInterval function               1000     Can get clunky pretty easily  especially if you are storing the return value of setInterval  I strongly recommend putting the function outside of the call and giving it a name so that it s clear and self-documenting  This also makes it possible to call a function that returns an anonymous function  in case you re doing stuff with closures  a special type of object that contains the local state surrounding a function    Array prototype forEach is fine      If state is kept with the callback  the callback should be returned from another function  e g  slideLoop  to form a closure   You don t want to mush state and callbacks together the way Ender did  This is mess-prone and can become hard to maintain  The state should be in the same function that the anonymous function comes from  so as to clearly separate it from the rest of the world  A better name for slideLoop could be makeSlideLoop  just to make it extra clear      Use proper whitespace  Logical blocks that do different things should be separated by one empty line   This   print some string    if foo  amp  amp  bar      baz     while  some number   some fn        SOME SENTINEL  amp  amp    counter  lt  limit         quux      is much easier to read than this   print some string   if foo amp  amp bar baz    while  some number some fn      SOME SENTINEL amp  amp   counter lt limit   quux      A lot of beginners do this  Including little 14-year-old me from 2009  and I didn t unlearn that bad habit until probably 2013  Stop trying to crush your code down so small      Avoid  string    value    string         Make a format function or use String prototype replace string regex  new string    Again  this is a matter of readability  This   format  Hello    You ve visited   times today  Your score is                 name  visits  score  maxScore  score maxScore   100           is much easier to read than this horrific monstrosity    Hello     name      You ve visited     visits      times today        Your score is     score         maxScore           score maxScore   100             edit  I m pleased to point out that I made in error in the above snippet  which in my opinion is a great demonstration of how error-prone this method of string building is   visits      times today              whoops   It s a good demonstration because the entire reason I made that error  and didn t notice it for as long as I did n t   is because the code is bloody hard to read      Always surround the arguments of your ternary expressions with parens  It aids readability and prevents bugs    I borrow this rule from the best practices surrounding C preprocessor macros  But I don t really need to explain this one  see for yourself   let myValue   someValue  lt  maxValue   someValue   2   0  let myValue    someValue  lt  maxValue     someValue   2     0     I don t care how well you think you understand your language s syntax  the latter will ALWAYS be easier to read than the former  and readability is the the only argument that is necessary  You read thousands of times more code than you write  Don t be a jerk to your future self long-term just so you can pat yourself on the back for being clever in the short term

User · Answer

Here  window onload   function start         slide      function slide         var num   0      for  num 0 num  10             setTimeout  quot document getElementById  container   style marginLeft  -600px  quot  3000           setTimeout  quot document getElementById  container   style marginLeft  -1200px  quot  6000           setTimeout  quot document getElementById  container   style marginLeft  -1800px  quot  9000           setTimeout  quot document getElementById  container   style marginLeft  0px  quot  12000            That makes it keep looping alright  That s why it isn t runnable here

User · Answer

The correct approach is to use a single timer   Using setInterval  you can achieve what you want as follows   window onload   function start         slide      function slide         var num   0  style   document getElementById  container   style      window setInterval function                 increase by num 1  reset to 0 at 4         num    num   1    4              -600   1   -600  -600   2   -1200  etc          style marginLeft    -600   num     px           3000      repeat forever  polling every 3 seconds

User · Answer

You don t want while true   that will lock up your system   What you want instead is a timeout that sets a timeout on itself  something like this   function start          your code here   setTimeout start  3000         boot up the first call start

User · Answer

You are calling setTimeout   ten times in a row  so they all expire almost at the same time  What you actually want is this   window onload   function start         slide 10     function slide repeats        if  repeats  gt  0            document getElementById  container   style marginLeft  -600px           document getElementById  container   style marginLeft  -1200px           document getElementById  container   style marginLeft  -1800px           document getElementById  container   style marginLeft  0px           window setTimeout            function                slide repeats - 1                         3000                      This will call slide 10   which will then set the 3-second timeout to call slide 9   which will set timeout to call slide 8   etc  When slide 0  is called  no more timeouts will be set up

User · Answer

try this   window onload   function start         slide      function slide          setInterval  document getElementById  container   style marginLeft  -600px   3000        setInterval  document getElementById  container   style marginLeft  -1200px   6000        setInterval  document getElementById  container   style marginLeft  -1800px   9000        setInterval  document getElementById  container   style marginLeft  0px   12000       setInterval is basically an  infinite loop  and it wont black up the browser  it waits the required time  then goes again

User · Answer

Here s a nice  tidy solution for you   also see the live demo -    window onload   function start         slide       function slide         var currMarg   0          contStyle   document getElementById  container   style      setInterval function             currMarg   currMarg    1800   0   currMarg   600          contStyle marginLeft    -    currMarg    px          3000       Since you are trying to learn  allow me to explain how this works   First we declare two variables  currMarg and contStyle   currMarg is an integer that we will use to track update what left margin the container should have   We declare it outside the actual update function  in a closure   so that it can be continuously updated access without losing its value   contStyle is simply a convenience variable that gives us access to the containers styles without having to locate the element on each interval   Next  we will use setInterval to establish a function which should be called every 3 seconds  until we tell it to stop  there s your infinite loop  without freezing the browser    It works exactly like setTimeout  except it happens infinitely until cancelled  instead of just happening once   We pass an anonymous function to setInterval  which will do our work for us   The first line is   currMarg   currMarg    1800   0   currMarg   600    This is a ternary operator  It will assign currMarg the value of 0 if currMarg is equal to 1800  otherwise it will increment currMarg by 600   With the second line  we simply assign our chosen value to containers marginLeft  and we re done   Note  For the demo  I changed the negative values to positive  so the effect would be visible

User · Answer

You can infinitely loop easily enough via recursion   function it keeps going and going and going       it keeps going and going and going       it keeps going and going and going

User · Answer

The key is not to schedule all pics at once  but to schedule a next pic each time you have a pic shown   var current   0  var num slides   10  function slide            here display the current slide  then       current    current   1    num slides      setTimeout slide  3000       The alternative is to use setInterval  which sets the function to repeat regularly  as opposed to setTimeout  which schedules the next appearance only

User · Answer

Perhps this is what you are looking for   var pos   0  window onload   function start         setTimeout slide  3000     function slide        pos -  600     if  pos     -2400       pos   0     document getElementById  container   style marginLeft  pos    px      setTimeout slide  3000

[javascript] JavaScript Infinitely Looping slideshow with delays?

Examples related to javascript

Examples related to loops