添加類每2.5秒的一個元素

Question

我想添加一個類的元素使用延遲（）每2.5秒：

$(".play").click(function(e) { 
     e.preventDefault(); 
     $('#productimage').addClass('step1'); 
     $('#productimage').delay(2500).addClass('step2'); 
     $('#productimage').delay(5000).addClass('step3'); 
     $('#productimage').delay(7500).addClass('step4'); 
     $('#productimage').delay(10000).addClass('step5'); 
    }); 

它不seeem奏效，因爲它增加了上課step5馬上。這是否是錯誤的方式？

謝謝。

Answer 1

delay()用於延遲動畫。使用setTimeout()：

var delay = 0; 

for(var i = 0; i<=5; i++){ 

    setTimeout(function(){ 
     $('#productimage').addClass('step' + (i+1)); 
    },delay); 

    delay += 2500; 
} 

或者像@DipeshParmar提到，setInterval可能更適合於這種情況。記住清除間隔一旦你完成：

var handle = setInterval(function(){ /* do stuff */ }, 2500); 
//When you're done: 
clearInterval(handle); 

Answer 2

setTimeout(expression, timeout);的超時之後運行的代碼/功能。

setInterval(expression, timeout);按間隔運行代碼/函數，它們之間有超時時間。如果您想定期執行操作

'setInterval' vs 'setTimeout'

因此，使用setInterval。

Answer 3

您可以使用setInterval以一定的時間間隔執行某些代碼。你必須定義一個停止條件（你想要的步數 - num_steps）。

對於每次迭代，只需添加從文本「step」組裝的類名稱以及循環所在的當前步驟。

var num_steps = 5; 
var cur_step = 1; 
var timer = setTimeout(function(){ 
    $('#productimage').addClass('step' + cur_step); 
    cur_step += 1; 
    if (cur_step > num_steps){ 
    clearInterval(timer); 
    } 
}, 2500); 

一旦我們達到想要的號碼，如果迭代，我們使用clearInterval命令停止計時器。

Answer 4

您可以使用setTimeout函數。

setTimeout(function() { 
     // Do something after 5 seconds 
}, 2500) 

Answer 5

試試這個：

var step = 1; 
var myInterval = setInterval(function(){ 
     if(step > 5){ 
      clearInterval(myInterval); 
      return false; 
     } 
     $('#productimage').addClass('step'+step); 
     step++; 

}, 2500);