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. — Freyja
– Freyja, Commented Apr 16, 2017 at 14:53
You need to block scope your i variable with the let keyword or wrap it in a closure! — Matt D. Webb
– Matt D. Webb, Commented Apr 16, 2017 at 14:54
Possible duplicate of How do I add a delay in a JavaScript loop? — Sebastian Simon
– Sebastian Simon, Commented Apr 16, 2017 at 14:55
@MattWebb This change alone isn't enough so the code makes what it is supposed to do — Andreas
– Andreas, Commented Apr 16, 2017 at 14:56

Jonas Wilms · Accepted Answer · 2017-04-16 15:32:21Z

2

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...

edited Apr 16, 2017 at 15:32

answered Apr 16, 2017 at 15:05

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kent Brewster · Accepted Answer · 2017-04-16 16:21:00Z

1

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.

answered Apr 16, 2017 at 16:21

Kent Brewster

2,5202 gold badges22 silver badges27 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:26Z

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... ;)

Cameron · Accepted Answer · 2017-04-16 15:13:52Z

-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, 2017 at 15:13

answered Apr 16, 2017 at 15:03

Cameron

1,05712 silver badges24 bronze badges

2 Comments

Jonas Wilms Over a year ago

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

Cameron Over a year ago

Oh I understand, I just put the code he had. But yeah the parameter doesn't make that much sense.

Collectives™ on Stack Overflow

How do I delay this code running in JavaScript?

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related