更改setInterval函數內的函數參數

Question

有沒有辦法將這五個setTimeout放入一個setInterval？我需要以某種方式在每個間隔後切換功能的參數。基本上，我希望能夠清除動畫而無需清除5個setTimeouts。這是動物。 www.hodaradesign.com。謝謝！

<script type="text/javascript"> 
$(window).load(function() { 
    setTimeout ("pulse('1')", 300); 
    setTimeout ("pulse('2')", 500); 
    setTimeout ("pulse('3')", 700); 
    setTimeout ("pulse('4')", 900); 
    setTimeout ("pulse('5')", 1100); 
}); 

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650); 
    setTimeout (function(){ 
     $(".roll"+n).animate({"opacity": "1"}, 350); 
    },800) 
}; 

</script> 

Answer 1

試試這個：

<script type="text/javascript"> 
$(window).load(function() { 
     var iCounter = 1; //variable to keep track of current iteration. 
     var interValKey = null;//variable to store the key to clear the interval later. 
     setTimeout (function(){ 
      interValKey = setInterval(function(){ 
       pulse(iCounter); 
       iCounter++; 
       if(iCounter == 6){ 
       clearInterval(interValKey); 
       } 
      }, 200); 
     }, 300); 
}); 

function pulse(n) { 
    $(".roll"+n).animate({"opacity": "0"}, 650); 
    setTimeout (function(){ 
     $(".roll"+n).animate({"opacity": "1"}, 350); 
    },800) 
}; 

</script> 

Answer 2

添加另一個參數到腳本到指定當前超時，然後使用功能本身增加計數和確定什麼時候（如果）下一次調用發生。

<script type="text/javascript"> 
$(window).load(function() { 
    setTimeout(function() { pulse(1,200); }, 300); 
}); 

function pulse(n,time) { 
    if (n <= 5) { 
     setTimeout(function() { pulse(n+1,time); }, time); 
    } 

    $(".roll"+n).animate({"opacity": "0"}, 650); 
    setTimeout (function(){ 
     $(".roll"+n).animate({"opacity": "1"}, 350); 
    },800); 

}; 

</script> 

Answer 3

使用一個變量，無論是setInterval調用和函數可以訪問。

<script type="text/javascript"> 
var n = 1; 

$(window).load(function() { 
    setTimeout(function() { 
     setInterval(pulse, 200); 
    }, 300); 
}); 

function pulse() { 
    var current_n = n; // avoid a race condition 
    $(".roll" + current_n).animate({"opacity": "0"}, 650); 
    setTimeout (function(){ 
     $(".roll" + current_n).animate({"opacity": "1"}, 350); 
    }, 800); 

    n += 1; 
}; 

</script>