jQuery setTimeout-還有更有效的方法嗎？

Question

因此，我只是以很小的間隔切換和刪除了一些類-我對JS和JQuery還是很陌生，但是我做到了，可以正常工作：

function priceTable() {
    setTimeout(function(){$("#price-table-1").toggleClass("price-table-highlight");  },1000);
    setTimeout(function(){$("#price-table-1").removeClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").toggleClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").removeClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").toggleClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").removeClass("price-table-highlight");  },4000); 
}

但是，似乎有很多重復–是否有更好的方法可以做到這一點？

Answer 1

您可以使用簡單的迭代方法將ID標識符干燥。

timer = 1000;
for( pricetableindex = 1; pricetableindex <=3; pricetableindex++ ){
    .....unction(){$("#price-table-"+pricetableindex).toggle...  ), timer);
    .....unction(){$("#price-table-"+pricetableindex).remove...  ), timer+=1000);

這是使用重復語法訪問對象成員，點語法以及數組表示法的主要賣點。

obj.member1 syntax does not allow this kind of manipulation, while 
obj["member1"] does.

Answer 2

function priceTable() {
    var table_count = 3;

    for(var i = 0; i < table_count; i++) {
        // jQuery
        $('#price-table-' + i).delay(1000)
                              .animate({ "background-color": "blue" })
                              .delay(1000)
                              .animate({ "background-color": "black" });

        // jQuery UI (http://api.jqueryui.com/addClass/)
        $('#price-table-' + i).delay(1000)
                              .addClass("price-table-highlight", 0) // 0 is important
                              .delay(1000)
                              .removeClass("price-table-highlight");

    }
}

Answer 3

如果你有藍色/黑色交換沒有限制，我會用jQuerys pulsate （DOC可以發現這里 ）效果：

function priceTable() {
  $("#price-table-1").effect("pulsate", { times:3 }, 2000);
  $("#price-table-2").effect("pulsate", { times:3 }, 2000);
  $("#price-table-3").effect("pulsate", { times:3 }, 2000);
}

唯一的缺點是：它脈動整個元素。 因此，我建議不要完全像上面那樣使用以上內容（因為＃price-tables中的所有文本也會淡入和淡出）。
脈動所做的是，它脈動了所應用元素的不透明度。 因此，例如，您可以為價格表添加一個空的div和適當的背景顏色。

Answer 4

您可以檢出jQuery的動畫和延遲功能的組合以實現結果。

jQuery UI插件 （您可能已經在使用它？toggleClass是他們的方法之一，但我認為它存在於jQuery核心中，並在jQuery-UI中進行了擴展）也可以使整個類動起來。 就像這樣：

function priceTable() {
    $("#price-table-1").toggleClass("price-table-highlight",1).delay(1000).toggleClass("price-table-highlight", 1);
}

並不是嚴格地說“更有效”，因為它需要整個額外的庫，但是肯定會更少的代碼。 我不知道您是否可以通過.delay調用來啟動動畫隊列，或者是否必須設置超時功能以在price-table-2和3 id元素上開始動畫。

Answer 5

對於jQuery動畫方法，使用delay方法效果很好。 對於其他jQuery方法，我可能建議您使用jquery.wait ，它的工作方式與delay類似，但適用於所有jQuery方法。 您的代碼將變為

function priceTable() {
  $('#price-table-1').wait(1000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(2000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(3000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
}