How do I delay this code running in JavaScript?

Question

I have written this code to change an image:

change = function(){
    for (r=0; r<6; r++){
        for (i = 0; i < 6 ; i++) { 
            setInterval(imgfile(number=i+1), 5000);
        }
    }
}

imgfile= function(number){
    a = 'document.getElementById("imgdiv").src = "images/'+number+'.svg"';
    eval(a);
}

The function change() is called when a button is clicked. When I press the button the image changes straight to 6.svg, when I want it to go through the images 1, 2, 3, 4, 5, 6 and to repeat it 6 times. When I change setInterval to change.setInterval or imgfile.setInterval it doesn't work at all. How do I fix this?

The one rule of `eval`: don't use eval, because eval is evil. — Frxstrem, Apr 16 '17 at 14:53
You need to block scope your `i` variable with the `let` keyword or wrap it in a closure! — Matt D. Webb, Apr 16 '17 at 14:54
Possible duplicate of [How do I add a delay in a JavaScript loop?](http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — Sebastian Simon, Apr 16 '17 at 14:55
@MattWebb This change alone isn't enough so the code makes what it is supposed to do — Andreas, Apr 16 '17 at 14:56

Jonas Wilms · Accepted Answer · 2017-04-16T15:32:21.380

change = function(i=0){
        imgfile(i%6+1);//change image
         if(i<36) setTimeout(change,5000,i+1);//next image in 5 seconds
}

imgfile= function(number){
    document.getElementById("imgdiv").src = "images/"+number+".svg";//no need to use ev(i||a)l
}

Instead of loop/interval mess you can simply start a timeout that restarts itself after changing the image... This code will loop over 6 images with a delay of 5 seconds and that 6 times...

score 1 · Answer 2 · answered Apr 16 '17 at 16:21

Something like this, perhaps?

var index, imgCount, loopCount, imgTag, countdown;

index = 0;
imgCount = 6;
loopCount = 6;
imgTag = document.getElementById('imgdiv');

countdown = function () {
  if (index < imgCount * loopCount) {
    imgTag.src = 'images/' + index % imgCount + '.svg';
    index = index + 1;
    setTimeout(countdown, 5000);
  }
};

countdown();

Here we're avoiding the double loop and using modular math (index % imgCount) to get the right file number.

score 0 · Answer 3 · edited May 23 '17 at 12:02

For another question I wrote a nice utility function that has quite a number of uses, but can also handle this scenario very easily. The main issue is that there is no time elapsing between the different delays being set. So you are setting 6 different actions to all happen within 5000ms, and all will occur at the same moment.

Here's my original answer

Here's the utility function for that answer, along with its application to your problem.

function doHeavyTask(params) {
  var totalMillisAllotted = params.totalMillisAllotted;
  var totalTasks = params.totalTasks;
  var tasksPerTick = params.tasksPerTick;
  var tasksCompleted = 0;
  var totalTicks = Math.ceil(totalTasks / tasksPerTick);
  var initialDelay = params.initialDelay;
  var interval = null;
        
  if (totalTicks === 0) return;
  
  var doTick = function() {
    var totalByEndOfTick = Math.min(tasksCompleted + tasksPerTick, totalTasks);
  
    do {
      params.task(tasksCompleted++);
    } while(tasksCompleted < totalByEndOfTick);
     
    if (tasksCompleted >= totalTasks) clearInterval(interval);
  };
  
  // Tick once immediately, and then as many times as needed using setInterval
  if (!initialDelay) doTick();
  if (tasksCompleted < totalTicks) interval = setInterval(doTick, totalMillisAllotted / totalTicks);
}

// Do 6 actions over the course of 5000 x 6 milliseconds
doHeavyTask({
  totalMillisAllotted: 5000 * 6,
  totalTasks: 6,
  tasksPerTick: 1,
  initialDelay: false, // Controls if the 1st tick should occur immediately
  task: function(n) { console.log('Set image to "images/' + (n + 1) + '.svg"'); }
});

Its always a good idea to overhelm newbies with much code that does not belong to a solution... ;) — Jonas Wilms, Apr 16 '17 at 15:15

Cameron · Answer 4 · 2017-04-16T15:13:52.337

-1

You want to do setTimeout().

setTimeout pauses for the millesecond value and then does the code. Where setInterval runs the code every whatever milleseconds.

Yeah, don't do change.setInterval or whatever, it is just setInterval.

An example for you would be this inside the for loop to replace the setInterval function.

setTimeout(imgfile(i+1), 5000);

edited Apr 16 '17 at 15:13

answered Apr 16 '17 at 15:03

Cameron

1,049
12
24

2

please dont try to teach things to others that you dont quite understand yourself. setTimeout(imgfile(number=i+1), 5000); will call imgfile right **now** – Jonas Wilms Apr 16 '17 at 15:11
Oh I understand, I just put the code he had. But yeah the parameter doesn't make that much sense. – Cameron Apr 16 '17 at 15:13

How do I delay this code running in JavaScript?

4 Answers4