Question

我已编写此代码来更改图片：

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

单击按钮时会调用函数change()。当我按下按钮时，图像直接变为6.svg，当我希望它通过图像1,2,3,4,5,6并重复6次。当我将setInterval更改为change.setInterval或imgfile.setInterval时，它根本不起作用。我该如何解决这个问题？

Answer 1

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
}

而不是循环/间隔混乱，你可以简单地启动一个超时，在更改图像后重启自己......这段代码将循环6个图像，延迟5秒，然后是6次......

Answer 2

也许是这样的事情？

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

我们在这里避免使用双循环并使用模块化数学（索引％imgCount）来获取正确的文件编号。

Answer 3

对于另一个问题，我写了一个很好的实用函数，它有很多用途，但也可以很容易地处理这个场景。主要问题是在设定的不同延迟之间没有时间流逝。所以你要在5000毫秒内设置6种不同的动作，所有动作都会在同一时刻发生。

这是我的original answer

这里是该答案的效用函数及其对您问题的应用。

＆＃13;

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"'); }
});

＆＃13;

Answer 4

您想要setTimeout()。

setTimeout暂停millesecond值，然后执行代码。 setInterval每隔milleseconds运行代码。

是的，不要change.setInterval或其他什么，只是setInterval。

你可以在for循环中使用一个例子来替换setInterval函数。

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

如何延迟在JavaScript中运行此代码？

4 个答案: