title: How do you slow down the execution of a for loop in JavaScript?
body: <p>I am making a basic image slider (press the next/prev button and the picture changes). I am also trying to implement a very simple fade effect; to do this I have a for loop which changes the class of the image, cycling through classes that change the opacity. The code works fine and does what I want it to do, but the for loop executes so quickly that you don't notice the change in opacity. I have looked all over and everywhere people are mentioning setTimeout, but that only causes a delayed start of a function.. I just want to slow my for loop so you can visually notice each iteration.</p>
  
  <pre><code>function nextphoto(){
  
      for(var x = 0; x &lt; 5; x++){
          photo.className = fade[x];
      }
  
      i++;
      if(i&gt;19){
      i=0;
      }
  
      photo.src = image[i];
  
      for(var y = 4; y &gt;= 0; y--){
          photo.className = fade[y];
      }
  }
  </code></pre>