Recursion with an Image Swapper

Question

I can't figure out why my recursive timeout function will only go through these images only once. It keeps ending even though I have reset the variable 'n' in the "else" statement. The goal of this is to change the z-scores of the images to swap them out.

var n = 0;
window.onload = imageFade;

function imageFade(){
    for(x=0; x<10; x++){
        document.getElementById("image" + x).style.zIndex = 0;
    }
    timeout();
}

function timeout() {
    setTimeout(function(){
        if(0 <= n <= 9){
            document.getElementById("image" + n).style.zIndex = 1;
            n++;
            timeout();
        }else{
            n=0;
            timeout();
        }
    }, 1000);
}

This is the only way to do it since a 'for loop' automatically goes through all the images instantly, and there is no such thing as a "timed for loop" where each iteration is timed. That is why I am resorting to this odd sort of blend of "for loop" and "if else" statement. — Mangofett, Jul 27 '16 at 05:03
I have searched google and only came up with the solution above. Do you mind showing me an example or page showing a for loop that has timed iterations? — Mangofett, Jul 27 '16 at 05:12
There are several ways (see here: http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values), but this is my preferred one, using an IIFE: http://scottiestech.info/2014/07/01/javascript-fun-looping-with-a-delay/ — Gerardo Furtado, Jul 27 '16 at 05:17
As @Rayon says, you need to have a look at your `if` condition, trying `(0 <= n <= 9)` in the console with various values for `n` always seems to return true — kevmc, Jul 27 '16 at 05:32
The first iteration of your loop will change the z-index of each image from 0 to 1, thus hiding it below all the others. Subsequent iterations will still set it to 1, thus not changing anything. In addition to fixing the condition in the if statement, you will have to fix your method of showing and hiding the images. I'd suggest to first set the z-order of the image you want to display to 0, then loop through all other images and set their z-order to 1. Another alternative is to change the CSS visibility property. — Jan Böcker, Jul 27 '16 at 05:42

guest271314 · Accepted Answer · 2016-07-27T07:10:09.330

1

You can use n < 11 at if condition

var n = 0;
var t = 0;
var timer = null;
timeout();

function timeout() {
  timer = setTimeout(function() {
    if (n < 11) {
      console.log(n);
      ++n;
      timeout();
    } else {
      n = 0;
      // call `clearTimeout(timer)` following five iterations of `0-10`
      if (++t === 5) { 
        clearTimeout(timer);
        return;
      };
      timeout();
    }
  }, n === 11 ? 0 :1000);
}

edited Jul 27 '16 at 07:10

answered Jul 27 '16 at 05:23

guest271314

1
15
104
177

This has a lot of state in the parent scope, because `timeout` doesn't expect any arguments. I wouldn't recommend that. – Jul 27 '16 at 10:32

Recursion with an Image Swapper

1 Answers1