javascript - JavaScript计时

我想选择一个类的所有元素。然后将该类更改为另一个类。 0.5秒后，我想将元素恢复为原始类。我必须连续执行8次。即使我的代码实现了（以某种方式），我也看不到按钮中的颜色变化。谁能帮我 ？我猜这是一个时间问题。这是js代码：

$(document).ready(function(){
    $('#start').click(function(){
        game();
    })

    function game(){
        var ordine = new Array();
        for(var t = 1; t <= 8; t++){
            var y = 0;
            for (var k = 0; k < t; k++) {
                var x = Math.floor((Math.random() * 4) + 1);
                ordine[y++] = x;
                change1(x);
                setTimeout(change2(x), 500);
            }
        }
    }

    function change1(y){
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        $("." + z).removeClass(z).addClass(t);
    }

    function change2(y){
        var z = 'cls' + y + 2;
        var t = 'cls' + y;
        $("." + z).removeClass(z).addClass(t);
    }
})

在这里您可以找到完整的代码（html，css和js）
http://jsfiddle.net/Cx5VK/2/

最佳答案

问题在以下行中：

setTimeout(change2(x), 500);

您在此处调用函数change2，并将其返回值传递给setTimeout。
但是，您真正想要的是在500毫秒后调用change2函数。将您的代码更改为：

setTimeout(function() { change2(x); }, 500);

这样，您将一个匿名函数传递给setTimout，它将在500ms之后由它执行。

编辑：我已经修改了您的JSFiddle：http://jsfiddle.net/Cx5VK/7/剥离了很多在该示例中没有做任何事情的代码（您很可能在其他地方需要它）：

$(document).ready(function () {
    $('#start').click(function () {
        game();
    })

    function game() {
        var x = Math.floor((Math.random() * 4) + 1);
        change1(x);
    }

    function change1(y) {
        var z = 'cls' + y;
        var t = 'cls' + y + 2;
        $("." + z).removeClass(z).addClass(t);
        setTimeout(function() { change2(y); }, 500);
    }

    function change2(y) {
        var z = 'cls' + y + 2;
        var t = 'cls' + y;
        $("." + z).removeClass(z).addClass(t);
        game();
    }
});

现在，game函数仅获取一个随机数，并使用该数字作为参数调用change1。 change1本身将设置超时时间，以通过change2重置该正方形的颜色。在该功能结束时，只需调用game()即可“重新启动”游戏，以获取另一个随机数，依此类推。我希望这是您想要的。

关于javascript - JavaScript计时，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24671861/