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.你真正想要的是在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(),获得另一个随机数等等.我希望这就是你要找的东西.