JavaScript 时序

Question

我想选择一个类的所有元素。然后将该类更改为另一个类。 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/

Answer 1

问题出在下面一行:

setTimeout(change2(x), 500);

您正在调用函数 change2在这里，将其返回值传递给 setTimeout。不过，您真正想要的是在 500 毫秒后调用 change2 函数。将您的代码更改为:

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

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

编辑:我修改了你的 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 重置该方 block 的颜色.在该函数结束时，通过简单调用 game() 来“重新启动”游戏。 , 以获得另一个随机数等等。我希望这就是您要找的。