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

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

您想setTimeout().

setTimeout 暂停毫秒值，然后执行代码。 setInterval 每毫秒运行一次代码。

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

你的一个例子是在 for 循环中替换 setInterval 函数。

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

Answer 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
}

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

Answer 3

对于另一个问题，我写了一个很好的实用函数，它有很多用途，但也可以很容易地处理这种情况。主要问题是设置的不同延迟之间没有时间流逝。因此，您将 6 个不同的操作设置为在 5000 毫秒内全部发生，并且所有操作都将在同一时刻发生。

这是我的

这是该答案的效用函数，以及它在您的问题中的应用。

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

Answer 4

也许是这样的？

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）来获得正确的文件编号。

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

How do I delay this code running in JavaScript?

javascript

html

timing

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

How do I delay this code running in JavaScript?

javascript

html

timing

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