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。你真正想要的是在500ms后调用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时间

1 个答案: