0

我正在尝试使用setTimeout在特定时间后更改一些课程，但我得到的只是即时更改，而无需等待 2 秒。我做错了什么？

这是JS

function addElements() {
    var data = ["empty","typeA","typeB","typeC"];
    for(var k=0;k<data.length;k++) {
    var set=document.getElementById("empty");
        set.setAttribute("id", "empty"+k);
        if(data[k] !== "empty") {
            var s = set.setAttribute("class", data[k]);
            setTimeout(function() { s; }, 2000);
        }
        else set.setAttribute("class", data[k]);
}
}

和 HTML

<a href="#" onclick="addElements()">Start</a>
<div id="empty" class="empty"></div>
<div id="empty" class="empty"></div>
<div id="empty" class="empty"></div>
<div id="empty" class="empty"></div>

更正了 JS，以防有人错误地需要它

function addElements() {
    var time = 0;
    var data = ["empty","typeA","typeB","typeC"];
    for(var k=0;k<data.length;k++) {
        var set=document.getElementById("empty");
        set.setAttribute("id", "empty"+k);
        var cName = data[k];

        if(cName  !== "empty") {
            time += 2000;
            (function(set, cName ) {
                setTimeout(function() {
                    set.setAttribute("class", cName );
                }, time);
            })(set, cName);
        }
    }
}
4

2 回答 2

3

当你这样做时var s = set.setAttribute("class", data[k]);，你正在运行该setAttribute函数。因此，您正在设置属性，然后设置s为返回值，即undefined.

做事s;无济于事。这就是为什么setTimeout(function() { s; }, 2000);实际上什么都不做。

你想要做的是在里面 setTimeout运行函数。此外，由于这将在循环完成后运行，因此您需要k通过关闭来保存对的引用。

var timeoutFunction = function(set, k){
    return function(){
        set.setAttribute("class", data[k]);
    }
};
setTimeout(timeoutFunction(set, k), 2000);
于 2013-05-14T18:15:27.187 回答
2

这是解决范围问题的一种方法k

var cName = data[k];
if(cName  !== "empty") {
    (function(set, cName ) {
        setTimeout(function() {
            set.setAttribute("class", cName );
        }, 2000);
    })(set, cName);
}
于 2013-05-14T18:37:19.333 回答