Question

我只是创建一个Simon Says风格的灯光游戏，用户必须按顺序记住点亮的颜色。我有一个代码需要经过的颜色矢量（colorArray）。每种颜色都会设置为稍微不同的色调，然后会在重新开始下一种颜色之前重置。但是，阵列中的所有颜色都会立即点亮（至少从人的角度来看）。似乎它忽略了我的setTimeout函数并直接运行所有代码！我只是想不出来。如下所示，我甚至添加了一个递增的参数time。但是，这甚至没有解决问题。你可以在这里看到它的作用：http://jsbin.com/qibik/9

var displayColors = function(colorArray,num,time)
{ 
  if(num!=colorArray.length)
    {
      setTimeout(setColor(colorArray,num),time);
      setTimeout(resetColors,time+400);
      num++;
      time+=10000;
      displayColors(colorArray,num,time);
    }
};

var setColor = function(colorArray,num)
{
      switch(colorArray[num])
        {

          case '#b':
            $('#b').css("background-color","#6367db");
            break;
          case '#g':
            $('#g').css("background-color","#14b826");
            break;
          case '#y':
            $('#y').css("background-color","#ebec85");
            break;
          case '#r':
            $('#r').css("background-color","#ee5c5c");
            break;       
        } 
};

感谢您的帮助

Answer 1

在这一行中，您立即调用该函数，并将其返回值传递给setTimeout：

setTimeout(setColor(colorArray,num),time);

要在带参数的函数上创建超时，您需要创建一个闭包：

setTimeout(function() {
    setColor(colorArray, num);
}, time);

在jQuery中创建定时事件

1 个答案: