通過一組按鈕循環

Question

我寫了一個小腳本，它通過一組按鈕來循環，每個按鈕都被分配一個函數。腳本如下：

$('#play').bind('click', function() { 
    setTimeout(function(){ $('#b12').click(); }, 0); 
    setTimeout(function(){ $('#b13').click(); }, 2500); 
    setTimeout(function(){ $('#b14').click(); }, 5000); 
}); 

現在這工作正常，但我試圖使它不僅僅是調用與`setTimeout的」各功能多一點的自動化。我有下面的代碼，但我覺得我做錯了什麼：

$('#play').click(function(){ 
    $('.buttons').each(function(){ 
     var time = 0; 
     setTimeout(function(){ $(this).click(); }, time); 
     time+= 2500; 
    }); 
}); 

這裏是有問題的HTML：像代碼

<button id="b12" class="buttons" onclick="oct12()">12th</button> 
<button id="b13" class="buttons" onclick="oct13()">13th</button> 
<button id="b14" class="buttons" onclick="oct14()">14th</button> 

<button id="play">play</button> 

Answer 1

把你time變量之外。每（）波紋管：

$('#play').click(function(){ 
    var time = 0; 
    $('.buttons').each(
     setTimeout(function(){ $(this).click(); }, time); 
     time+= 2500; 
    }); 
}); 

Answer 2

可以使用。每個索引對於這一點，在烏拉圭回合的代碼ü重置了時間每次迭代

$('#play').click(function(){ 
     $('.buttons').each(function(i){ 
     setTimeout(function(){ $(this).click(); }, i * 2500);     
     }); 

    }); 

DEMO

Answer 3

您可以使用類似plugin jquery-timing。這使得時序問題非常容易：

$('#play').bind('click').$('#b12,#b13,#b14').each($).click().wait(2500); 

就是這樣。

本示例使用插件的inline version of bind()，sequentially looped version of each()和延遲方法wait(timeout)。 PS：我喜歡寫.on（'click'）而不是.bind（'click'），因爲它像一句話一樣流利地閱讀。