Javascript 在for循环中设置超时

我不知道如何在for循环中使用setTimeout函数。我要做的是根据数组一次突出显示一个div。这是我的密码：

for (i = 0; i < strArray.length; i++) {
  doSetTimeout(i, colors, strArray);
}

---

基于，我认为有一个单独的功能来改变颜色可以解决这个问题，但我仍然有一个问题，所有的div同时闪烁。有人知道问题是什么吗？还有其他更好的方法吗

为什么不使用setInterval呢

    var i = 0;        
    var intervalID = setInterval(function() {

        if (i < strArray.length) {
             $("use").css("fill", "#333333");
             $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
             clearInterval(intervalID)
        }
        i++;
    }, 1000);

var i=0；
var intervalID=setInterval（函数（）{
如果（i

为什么不改用setInterval

    var i = 0;        
    var intervalID = setInterval(function() {

        if (i < strArray.length) {
             $("use").css("fill", "#333333");
             $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
             clearInterval(intervalID)
        }
        i++;
    }, 1000);

var i=0；
var intervalID=setInterval（函数（）{
如果（i

您可以这样做：

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

function doSetTimeout(i, colors, strArray) {
  if(i >= strArray.length) return;  

  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");

    doSetTimeout(i + 1, colors, strArray);
  }, 1000);
}

doSetTimeout(0, colors, strArray);

这将创建一个函数，并立即为数组中的第一个元素执行它

所有其他调用仅在触发上一个超时事件时执行，这将确保顺序处理

---

整个过程在处理完所有元素后结束，因为在最后一次调用

doSetTimeout

时，没有安排新的超时。

您可以这样做：

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

function doSetTimeout(i, colors, strArray) {
  if(i >= strArray.length) return;  

  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");

    doSetTimeout(i + 1, colors, strArray);
  }, 1000);
}

doSetTimeout(0, colors, strArray);

这将创建一个函数，并立即为数组中的第一个元素执行它

所有其他调用仅在触发上一个超时事件时执行，这将确保顺序处理

---

处理完所有元素后，整个过程就结束了，因为在上次调用

doSetTimeout

时，没有安排新的超时。

您可以这样做：

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

function doSetTimeout(i, colors, strArray) {
  if(i >= strArray.length) return;  

  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");

    doSetTimeout(i + 1, colors, strArray);
  }, 1000);
}

doSetTimeout(0, colors, strArray);

---

您可以这样做：

(function doSetTimeout(i, colors, strArray) {
  if (i >= strArray.length) return; // nothing more to do
  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");
    // call the function recursively
    doSetTimeout(i+1, colors, strArray);
  }, 1000);
})(0, colors, strArray); // Execute immediately for index 0

function doSetTimeout(i, colors, strArray) {
  if(i >= strArray.length) return;  

  $("use." + strArray[i]).css("fill", colors[Math.floor((Math.random() * colors.length) + 1)]);
  setTimeout(function() {
    $("use").css("fill", "#333333");

    doSetTimeout(i + 1, colors, strArray);
  }, 1000);
}

doSetTimeout(0, colors, strArray);

---

因为您没有更改持续时间<代码>}，1000*i）可以…@Rayon，仅更改持续时间并不能阻止对所有元素同时执行第一个fill语句。@trincot–我没有注意到。。。好的；）请注意，颜色数组索引中的“+1”是一个bug。索引从0开始，长度为1。你最好把随机的*长度四舍五入。有适合你需要的答案吗？您能接受一个或留下评论吗？因为您没有更改持续时间<代码>}，1000*i）可以…@Rayon，仅更改持续时间并不能阻止对所有元素同时执行第一个fill语句。@trincot–我没有注意到。。。好的；）请注意，颜色数组索引中的“+1”是一个bug。索引从0开始，长度为1。你最好把随机的*长度四舍五入。有适合你需要的答案吗？您能接受一个或留下评论吗？从0开始i，在条件读取后递增IMHOTrue。修好了。感谢从0开始i，并在条件读取后递增。修好了。谢谢