javascript - while循环调用setTimeout不起作用

Question

我有一组<span>带编号的 ID，我想添加类<span>并Id=1等待 3 秒删除类而不是添加类<span id=2>等等......

如何让这个代码工作。while循环无法调用setTimeout任何人都可以帮助吗？

var spanSet = 4;
var spanId = 1;
while (spanSet != 0) {
    changeClass();
    spanSet--;
}

function changeClass() {
    $('#' + spanId).addClass("hilite");
    setTimeout(remove, 1000);
    spanId++;
}

function remove() {
    alert('remove');
    $('#' + spanId).removeClass("hilite");
    return true;
}

Answer 1

检查此 jsfiddle以查看代码中实际发生的情况。

删除while循环并像这样设置它（参见jsfiddle）：

var spanId = 1;
changeClass();

function changeClass(){
 $('#'+spanId).addClass("hilite");
 spanId+=1;
 setTimeout(remove, 500);
}

function remove(){
 $('#'+(spanId-1)).removeClass("hilite");
 if (spanId<6){
   changeClass();
 }
}

Answer 2

这将是最简单的 jQuery 动画函数。

这就是所有需要的：

var spanId = 1;

(function hilite() {
    $('#' + spanId).addClass('hilite').delay(3000).queue(function() {
        $(this).removeClass('hilite').dequeue();
        if (++spanId < 5) {
            hilite();
        }
    });
})();

在http://jsfiddle.net/alnitak/Bs8kj/工作演示

对于一个更通用的，它对 ID 没有任何假设，并且不需要外部变量，试试这个：

(function hilite(a) {
    $(a.shift()).addClass('hilite').delay(3000).queue(function() {
        $(this).removeClass('hilite');
        if (a.length) {
            hilite(a);
        }
    });
})(['#1', '#2', '#3', '#4']);

注意：数字 ID 是 HTML5 的东西。CSS也不支持它们。