Can you set an Interval on button clicks?

Question

$('.button').click();

The above code works great to click all buttons on the page at once, but I am trying to fire off clicks every half or second or so until the jQuery Object has looped i.e.

$(function(){

   $('.button').each(function(){

          setInterval('$(this).click()', 500);

    });
});

Can some one tell me how I can do this? the above code obviously does not work. Am I missing something?

Answer 1

Do not use strings in setInterval() or setTimeout(). Always pass function objects:

$(function() {
    $('.button').each(function(){
        var button = $(this);
        setInterval(function() {button.click();}, 500);
    });
});

EDIT: If all you want is to trigger a click, this can also be expressed more simply as (thanks icambron):

$(function() {
    $('.button').each(function(){
        setInterval($(this).click, 500);
    });
});

Answer 2

$(function(){
   var buttons = $('.button');
   var len = buttons.length;
   var intr = new Array();
   buttons.each(function(i){
          var $this = $(this);
          var timeClick = function(){
             if(i < len ){
                $this.click();
             }
             else{
               clearInterval(intr[i]);
             }
          };

          intr[i] = setInterval(timeClick, 500);
    });
});

Answer 3

What about this?

setInterval(function(){ $('.button').click();},500);

Answer 4

You could build a function to execute the clicks sequentially, a click every N specified milliseconds timeout, iterating the matched elements one by one:

Usage:

clickQueue($('.button'), 500);

The function:

var clickQueue = function ($els, timeout) {
  var n = $els.length, i = 0;

  function click () { // internal function
    $els.eq(i++).click(); // click the element and increment i
    if (i < n){
      setTimeout(click, timeout); // execute again if possible
    }
  }
  click(); // invoke for first time
};