您可以在运行时更新 setInterval 变量吗

Question

I need to modify existing slider. Its slides now have differing data-seconds added to it and need be active that long. Previously I had:

var slidePause = 10;
function startSlideBanner() {
  bannerTimer = setInterval(nextSlide, slidePause * 1000);
}
startSlideBanner();

Which worked infinitely well. Now I would need to update slidePause variable every iteration. Looking for an example if its possible.

Answer 1

No: You cannot do it with setInterval . Once it is set, it may only be cancelled.

What you can do however, is use setTimeout to achieve your goals. While this can be done recursively, I prefer to take advantage of promises to do it iteratively:

const wait = ms => new Promise(res => setTimeout(res, ms));
let slidePause = 10;

async function startSlideBanner() {
   while(true) {
     await wait(slidePause * 1000);
     nextSlide();
     
     // Example: Double the time for each slide
     slidePause = slidePause * 2;
   }
}

startSlideBanner();

Answer 2

One of the problems with setInterval() is that JavaScript's single threaded nature can result in uneven periods between the setInterval() code being fired. To avoid this, run setInterval() at a faster rate, and calculate the time passed to determine whether an action should be taken.

If you make the calculation for time passed dependent on a variable you can change the effective rate at which the event occurs.

 function nextSlide(period){ console.log("Next Slide in "+period); } function VariableTimer(period, startImmediately = true) { this.period = period; self = this; this.startTime = startImmediately?0:Date.now(); this.time = setInterval(function(){ if (Date.now()-self.startTime > self.period*1000) { self.startTime = Date.now(); nextSlide(self.period); } }, 100); // Run setInterval at 100ms intervals. this.stop = function(){ clearInterval(self.time); } } let timer = new VariableTimer(10); // Change the timer period like this // timer.period = 5; // After 20 seconds switch to 5 second intervals setTimeout(function(){timer.period = 5;},20000); // After 40 seconds, stop the timer. setTimeout(function(){timer.stop();console.log("timer stopped")}, 40000);