我們可以結合多的jQuery的setTimeout

Question

我有這樣以下jQuery代碼：

setTimeout(function() { 
    $("#ToDo1").removeClass("fa-spin fa-spinner"); 
    $("#ToDo1").addClass("fa-check-square"); 
    $("li:first").html("<i class='fa-li fa fa-check-square' id = 'ToDo1'></i>Download Complete"); 
    $("#ToDo2").addClass("fa-spin fa-spinner"); 
}, 2000); 

setTimeout(function() { 
    $("#ToDo2").removeClass("fa-spin fa-spinner"); 
    $("#ToDo2").addClass("fa-check-square"); 
    $("#ToDo3").addClass("fa-spin fa-spinner"); 
}, 3000); 

setTimeout(function() { 
    $("#ToDo3").removeClass("fa-spin fa-spinner"); 
    $("#ToDo3").addClass("fa-check-square"); 
    $("#ToDo4").addClass("fa-spin fa-spinner"); 
}, 5000); 

setTimeout(function() { 
    $("#ToDo4").removeClass("fa-spin fa-spinner"); 
    $("#ToDo4").addClass("fa-check-square"); 
}, 5550); 

有沒有辦法將它縮短，或者這是完成任務的唯一途徑？ 謝謝！

Answer 1

可以這樣做：

var delays = [2000, 3000, 5000, 5500], 
    $todos = $("#ToDo1, #ToDo2, #ToDo3, #ToDo4"); 

$.each(delays, function(i, delay) { 
    setTimeout(function() { 
     $todos.eq(i).toggleClass("fa-spin fa-spinner fa-check-square"); 
     $todos.eq(i + 1).addClass("fa-check-square");// will fail silently when it doesn't exist 
    if (i === 0) { 
     $("li:first").html("<i class='fa-li fa fa-check-square' id = 'ToDo1'></i>Download Complete"); 
    } 
    }, delay); 
}); 

注意你重複的ID中的第一個，當你注入HTML