Call multiple functions on window resize

Question

at the moment I have multiple functions firing on window resize:

            $(window).resize(checkNav); 
            $(window).resize(checkWidth); 
            $(window).resize(checkSlider); 

and what I am looking for is to run them all from the same window resize something like this:

            $(window).resize(checkNav && checkWidth && checkSlider);

I just dont know to write it down! The best way I can find to do it is call a function in a window resize, which then calls three, but want to cut out this middle-man function.

thanks

Answer 1

I have achieved this by attaching a global handler that then makes a subsequent trigger call to a custom event I named "window:resize":

     $(window).resize(function () {
       $(window).trigger("window:resize")
    })

You can then attach as many decoupled handlers as you like for your custom event

I might somewhere in my code want to perform task A:

    $(window).on("window:resize", function (e) {
        //do some task A
    })

And also perform task B somewhere else:

    $(window).on("window:resize", function (e) {
        //do some task B
    })

This approach allows you to separate your code across your application more efficiently

Read about custom events here: https://api.jquery.com/trigger/

Answer 2

You can achieve this in several ways.

• You can create an anonymous function and call the rest of functions within:

  $(window).resize(function(){
     checkNav();
     checkWidth();
     checkSlider();
  });
  

• You can create a variable function and call it from the resize:

  var resizeHandler = function(){
     checkNav();
     checkWidth();
     checkSlider();
  };
  
  $(window).resize(resizeHandler);
  

I recommend you this entry of Mozilla's documentation.

Answer 3

You can't cut down the middle man. Only thing you can do is anonymize (is that a word?) him so you can forget about him easier:

$(window).resize(function(e) {checkNav(e); checkWidth(e); checkSlider(e); });

Actually, since i dived into this, let's go for a generic solution:

function serializer() {
  // arguments is a list of functions
  var args = Array.prototype.slice.call(arguments, 0); // clone the arguments

  return function() {
    // arguments are passed by the event system
    var ret;

    for (var i=0; i<args.length; i++) {
      ret = args[i].apply(this, arguments);
      if (ret === false) return ret;
    }
    return ret; 
  };
}
function f1(){
  console.log(1);
}

function f2(){
  console.log(2);
  return false;
}

function f3(){
  console.log(3);
}

// USAGE:
document.getElementById('test').addEventListener('click', serializer(f1,f2,f3) );
// or with jQuery:
$(window).resize(serializer(f1, f2, f3));

As you can see, the propagation is stopped when one of the handlers returns false. You could change that to check the state of the event if you wanted, as it would be more in line with the standards. For a starting point though, i'd say it's pretty good.

Answer 4

I just tried this

  $(window).resize ->
    console.log '1'

  $(window).resize ->
    console.log '2'

and it logs out both 1 and 2 when I resize. So it looks like you can bind multiple function to resize and it does not override the previous one. I am testing in chrome, I wonder if this works cross browser?