而循环调用setTimeout不起作用

while loop calling setTimeout not working

本文关键字：不起作用 setTimeout 调用 循环      更新时间：2024-01-09

我有一组编号为Id的<span>，我想用Id=1将类添加到<span>，等待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;
}

检查这个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();
 }
}

这对于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也不支持它们。

相关文章：