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

您可以使用.each的索引，在您自己的代码中每次迭代重置时间

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

  });

DEMO

Answer 2

将time变量放在.each（）之外，如下面的代码：

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

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'），因为它读起来更像句子。

循环通过一组按钮

3 个答案: