Question

我正在构建一个Simon游戏，我正在尝试延迟for循环的迭代，以便每次调用函数之间存在间隙。我希望程序点亮simon板上不同的楔子之间有一个延迟。我很难理解如何使用setInterval并希望得到一些帮助。

这是我的代码：http://codepen.io/MindfulBell/pen/LpwGZP

function lightUp(move){
switch (move) {
  case 1:
      $(grn).css('background-color', 'lightgreen')
      setTimeout(function(){
          $(grn).css('background-color', 'green');
      }, 1500)
      break;
    case 2:
      $(red).css('background-color', 'red');
      setTimeout(function(){
          $(red).css('background-color', 'darkred');
      }, 1500)
      break;          
    case 3:
      $(yel).css('background-color', 'lightyellow');
      setTimeout(function(){
          $(yel).css('background-color', 'yellow');
      }, 1500)
      break;          
    default:
      $(blue).css('background-color', 'lightblue');
      setTimeout(function(){
          $(blue).css('background-color', 'blue');
      }, 1500)
      break;

  }
 } 

//problem is it lights everything up at the same time, not one at a time, need to figure out how to do a delay or some such...

  function simonSaysLv1(){   
    simonsMoves.push(Math.floor(Math.random() * (4-1+1)) + 1)
    for (i=0; i<simonsMoves.length; i++) {
      lightUp(simonsMoves[i]);
    }      
  }

这不起作用，因为它只是同时点亮所有内容。谢谢你的帮助。

编辑：删除“索引”为“我”。此外，这是为测试而构建的，因此需要在中心多次单击白色div才能看到数组中有多个值的运行。

Answer 1

您可以尝试使用setTimeout，如下所示：

setTimeout(function(){
    lightUp(simonsMoves[index]);
}, i*1000);

这将立即调用该函数，然后每秒调用一次（之间1000毫秒）。

我认为这样的事情就是你所追求的：

function simonSaysLv1(){
    simonsMoves.push(Math.floor(Math.random() * (4-1+1)) + 1);
    for (i=0; i<simonsMoves.length; i++) {
        (function(index){
            setTimeout(function(){
                lightUp(simonsMoves[index]);
            }, 1500*index);
        })(i);
    }      
}

Codepen

替代方式

由于我正在接受请求，对于木制计算机无法同时处理30个setTimeout的人来说，这就是使用递归函数的方法：

function simonSaysLv1(){   
    simonsMoves.push(Math.floor(Math.random() * (4-1+1)) + 1);
    doSimonMove(0);    
}

function doSimonMove(index){
    if(index < simonsMoves.length){
        lightUp(simonsMoves[index]);
        setTimeout(function(){
            doSimonMove(index + 1);
        }, 3000);
    }
}

Codepen

Answer 2

首先：

将<{1}}
.sim-button { cursor: pointer; }添加到您的CSS （西蒙的按钮现在看起来可点击！） < / LI>

现在，关于你的问题：

#inner-circle { cursor: pointer; }具有相同的setTimeOut() ms延迟，没有任何乘数订购它们。这就是他们为什么同时出现的原因。在1500内function simonSaysLv1(){传递i+1作为计数器。在收到它（lightUp(simonsMoves[i], i+1);）作为参数order已将function lightUp(move, order){从setTimeOut更改为1500
Javascript＆＃39; s / jQuery的事件触发方法是异步，因此 light和regular 颜色都需要1500 * order。 执行：

setTimeOut()

和其他颜色相似。

最后：记得在所有适当的地方添加case 1: setTimeout(function(){ $(grn).css('background-color', 'lightgreen'); }, 1500 * order); setTimeout(function(){ $(grn).css('background-color', 'green'); }, 2000 * order); break;。 许多人失踪。代码在这里运行得很好。

Answer 3

我认为递归函数更适合这种情况。有点像：

function lightUp(simonsMoves,currentIndex){
    // do whatever you need to to show the light here
    // then wait one second and call the function again passing the next index
    setTimeout(function(){
         lightUp(simonsMoves, currentIndex+1);
    },1000);
}


// start it off by calling `lightUp` passing the array of moves and the starting index
lightUp(simonsMoves,0);

如何使用JavaScript延迟为数组中的每个元素执行的函数？

3 个答案: