jQuery延迟触发事件

Question

I have a situation in which I have a series of buttons on a page. Clicking a button triggers several functions and runs a series of complex calculations.

Then I have what is essentially a "click all" button that will trigger a click event on each button:

$('.myBtn').trigger('click'); // $('.myBtn') returns a list of all buttons

This works fine in most modern browsers, but in IE the trigger('click') takes a long time to run and I often get a 'script is taking too long' error.

Unfortunately, the way things are set up there's no real way to avoid the heavy calculations on click.

So I'm thinking of adding some sort of delay. So on "click all", trigger btn1 click , wait 200ms, trigger btn2 click , wait... etc.

I've tried things like:

$('.btnAll').each(function() {
    var el = $(this);
    setTimeout(function () {
        el.trigger('click');
    }, 200);
});

But I don't think this works correctly because of the way .each() calls are queued or something(?). Event queueing and synchronous calls are still a little unclear to me.

Any thoughts on how I can make this work?

Answer 1

.each() calls are not 'queued', they just execute the given function on each element of the collection, one after the other. So you set for each button-click a timeout of 200ms. The result: 200ms later all buttons are triggered at (nearly) same time. If you want to stagger the clicks with delay in between, you must give them different times like so:

$('.btnAll').each(function(i) { // i is index of this in the collection
    var el = $(this);
    setTimeout(function () {
        el.trigger('click');
    }, i * 200); // each button gets a multiple of 200ms, depending on its index
});

This triggers the first button immediately, the second 200 ms later, the third.... .

Answer 2

Try it

function myEach(){
  $('.btnAll').each(function() {
       $(this).trigger('click');
  });
}

setTimeout(myEach(),200);