javascript - jQuery trigger event with delay - Stack Overflow

admin管理员组

文章数量:1323736

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 plex 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?

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 plex 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?

• javascript
• jquery
• events
• jquery-events

Share Improve this question Follow edited May 23, 2019 at 9:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Nov 7, 2014 at 17:30 dmathisendmathisen 2,34255 gold badges3737 silver badges6565 bronze badges 2

• is it posible to offload your processing to web workers or a server? – dm03514 Commented Nov 7, 2014 at 17:33
• It's all front end work and I'm not able to offload to the server. I will look into Web Workers though. I've never worked with them before. – dmathisen Commented Nov 7, 2014 at 17:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

.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.... .

Try it

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

setTimeout(myEach(),200);

本文标签： javascriptjQuery trigger event with delayStack Overflow