How to avoid jQuery on() method bind twice?

Question

I want to trigger a customized job on window resize after certain data is loaded:

function doJob() { 
    ... 
}

DataLoaded() {
   $(window).on("resize", function() { doJob(); });
}

However DataLoaded can be occured multiple times, how can I make sure doJob() only bind once ?

PLEASE NOTE, bind once, but can be executed multiple times, so $("...").one("...") is not my goal

IMO:

set a global variable isBind to check if method is bind, which looks redundant

$(window).off("resize").on("resize", ....), I'm not sure if calling off() first is a safe way

@M.Tanzil yes, it can be multiple times. I updated my question. — ineztia, Aug 04 '16 at 04:24
`$(window).off("resize.DataLoaded").on("resize.DataLoaded", function() { doJob(); });` — Arun P Johny, Aug 04 '16 at 04:29
@ArunPJohny thanks! I realized It could be most efficient way to achieve my goal. Lots of basic rules were thrown away from my mind. :) Please post it as an answer — ineztia, Aug 04 '16 at 04:32
I deleted my answer. `off` is the way to go, but I misunderstood the question. But I don't understand why you're setting the `resize` event inside the `DataLoaded` function. If you set it outside the function, it only gets bound once anyway, so you don't have to go to all this trouble. Seems to me that that's the most efficient way to go. — BobRodes, Aug 04 '16 at 05:10

Bhojendra Rauniyar · Accepted Answer · 2016-08-04T04:37:48.597

You can set a flag variable like this:

var didJob = false;
DataLoaded() {
   $(window).on("resize", function() { 
     if(!didJob){
      doJob();
      didJob = true;
     }
   });
}

But I am not sure how you are calling DataLoaded function multiple times because inside this function you are also checking on window resize. So, it should not be called multiple times. Probably you want like this:

$(window).off("resize.DataLoaded").on("resize.DataLoaded", function() {
     doJob(); 
});

In the preceding example you see resize.DataLoaded and the DataLoaded is the event namespace. Firstly you are unbinding resize event with DataLoaded namespace and then binding resize event with DataLoaded namespace so that it wouldn't affect any other resize event.

score 1 · Answer 2 · answered Aug 04 '16 at 04:23

1

You can unbind such event everytime you bind it

$(window).unbind("resize");
$(window).bind("resize", function() { doJob(); });

answered Aug 04 '16 at 04:23

VinhNT

1,043
7
13

It's preferred to use `on()` and `off()` – 4castle Aug 04 '16 at 04:25
2

@VinhNT If other plugins which have "window.resize" registered previously, does my unbind() call affect those bindings ? – ineztia Aug 04 '16 at 04:27

score 0 · Answer 3 · answered Aug 04 '16 at 04:28

I think, you should do it like this, declare a variable and increment it after doJob() functions then do a check on it.

   function doJob() { 
        ... 
   }

   var once = 0;
   DataLoaded() {
    $(window).on("resize", function() { 
        if(once == 0){
          doJob();
          once++;
        }
    });
   }

Hope this helps.

How to avoid jQuery on() method bind twice?

3 Answers3