Question

我正在努力打造西蒙游戏＆＃39;并使用setTimeout方法来减轻按钮。当我直接在setTimeout方法中编写函数时，它可以工作。

 $(function(){
    var randPattern=[];
    var buttonId=['red','yellow','green','blue'];
    var origColor=['#B40404','#D7DF01','#0B610B','#0B0B61'];
    var patternColor=['#F78181','#F4FA58','#A9BCF5','#81F781'];
    var level= 5;
    var count= 0;
    var time= 1000;



    $('#start').click(function gameStart() {
        patternGenerate();
        for(i=0; i<randPattern.length; i++){
          display(i);
        }


    });

     function patternGenerate() {
         for(var h=0; h<level; h++){
             randPattern.push( Math.floor( Math.random()*4) );

         }
     }
    function display(i){
        setTimeout(function(){document.getElementById(buttonId[randPattern[i]]).style.backgroundColor = patternColor[randPattern[i]];document.getElementById(randPattern[i]).play();}, 1500*i);
        setTimeout(function(){document.getElementById(buttonId[randPattern[i]]).style.backgroundColor = origColor[randPattern[i]]}, 750+1500*i );
    }

但是当我分别编写setTimeout方法内部的函数时，这样的函数a（i）和函数b（i）。它不起作用。而且控制台说＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39; of null＆＃39;＆＃39;。我认为这两者没有区别。我无法理解为什么第二种方式在第一种方式不起作用时会起作用。

$(function(){
var randPattern=[];
var buttonId=['red','yellow','green','blue'];
var origColor=['#B40404','#D7DF01','#0B610B','#0B0B61'];
var patternColor=['#F78181','#F4FA58','#A9BCF5','#81F781'];
var level= 5;
var count= 0;
var time= 1000;



    $('#start').click(function gameStart() {
        patternGenerate();
        for(i=0; i<randPattern.length; i++){
          display(i);
        }


    });

     function patternGenerate() {
         for(var h=0; h<level; h++){
             randPattern.push( Math.floor( Math.random()*4) );

         }
     }
     function a (i){
        document.getElementById(buttonId[randPattern[i]]).style.backgroundColor = patternColor[randPattern[i]];
        document.getElementById(randPattern[i]).play();
    }
    function b (i){
        document.getElementById(buttonId[randPattern[i]]).style.backgroundColor = origColor[randPattern[i]];
    }
    function display(i){
        setTimeout(a,1500*i);
        setTimeout(b,750+1500*i);
    }

    });

Answer 1

期待

a和b传递一个参数，该参数将分配给i。

虽然i函数中有一个名为display的变量：您没有将其传递给a或b。

function display(i){
    setTimeout( a, 1500*i,     i );
    setTimeout( b, 750+1500*i, i );
}

Answer 2

您在i内使用了function display(i){，但此变量未传递给a或b。如果要传递变量，仍需要创建一个新的闭包并从中调用函数：

function display(i){
    setTimeout(function() { a(i) }, 1500*i);
    setTimeout(function() { b(i) }, 750+1500*i);
}

为什么单独编写setTimeout函数不起作用

2 个答案: