JQuery - prevent triggering multiple events

Question

I'm using events in JQuery to communicate between different JavaScript modules. So in one of the modules I have something like this:

$(window).on('updateStatusRequest', function(ev) { // Send updateStatus event after fetching data data = fetchData(); $(window).trigger('updateStatus', data); });

And this data fetch can potentially last long (it sends HTTP request outside) before finishing. Here's a problem I'm thinking about now - what if there are a lot of 'updateStatusRequest' triggered and the function didn't fetch data yet? I want to prevent multiple data fetches in that case so I'm thinking of something like this:

$(window).on('updateStatusRequest', function(ev) { $(window).off('updateStatusRequest', this); // Send updateStatus event after fetching data data = fetchData(); $(window).trigger('updateStatus', data); $(window).on('updateStatusRequest', this); });

So I want to turn callback off during its execution. Unfortunately the approach above don't work. What is the proper way to do that?

Hm..."fetchData is taking a long time"...before we continue on this, can you please assure me that you are NOT using synchronous requests? — Katana314
– Katana314, Commented Nov 13, 2015 at 19:39
I'm using JQuery's getJSON() to fetch data, I haven't found in its documentation whether is asynchronous or not but I'm assuming it is as it makes contact with the outside. — qiubit
– qiubit, Commented Nov 13, 2015 at 19:45
Alternatively to Howard's answer you can just wrap the content of your function in an if statement, that checks for a global variable, if (!fetching){fetching = true;...} and set fetching to false again on fetchData completion. — DrunkWolf
– DrunkWolf, Commented Nov 13, 2015 at 19:56

Howard Renollet · Accepted Answer · 2015-11-13 19:46:35Z

You need a callback when you add the event handler back in. Something like this should work:

$(window).on('updateStatusRequest', function(ev) { newFunction(); }); var newFunction = function (){ $(window).off('updateStatusRequest'); data = fetchData(); $(window).trigger('updateStatus', data); $(window).on('updateStatusRequest', function (){ newFunction(); }); }

Although, I would probably use a promise instead of adding/removing the event handlers...

Thanks for that promise reference, will probably use that as it is more clear

Chris Rogers · Accepted Answer · 2015-11-13 19:51:14Z

0

Use JQuery.ajax and turn async off

answered Nov 13, 2015 at 19:51

Chris Rogers

1,5222 gold badges21 silver badges41 bronze badges

Collectives™ on Stack Overflow

JQuery - prevent triggering multiple events

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related