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

2

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

answered Nov 13, 2015 at 19:46

Howard Renollet

4,7392 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

qiubit Over a year ago

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

Howard Renollet Over a year ago

no problem - promises are great, I use them all the time.

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related