在窗口调整大小时调用多个函数

Question

目前我在窗口调整大小时触发了多个函数:

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

而我正在寻找的是从同一窗口运行它们调整大小如下:

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

我只是不知道写下来!我能找到的最好的方法是在窗口调整大小调用一个函数,然后调用三个,但是想要删除这个中间函数.

谢谢

Answer 1

我通过附加一个全局处理程序来实现这一点,然后对我命名为"window:resize"的自定义事件进行后续触发器调用:

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

然后,您可以为自定义事件附加任意数量的解耦处理程序

我可能在我的代码中某处想要执行任务A:

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

并在其他地方执行任务B:

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

这种方法允许您更有效地在应用程序中分离代码

在此处阅读有关自定义事件的信息:https://api.jquery.com/trigger/

Answer 2

您可以通过多种方式实现这一目标.

• 您可以创建一个匿名函数并调用其中的其余函数:

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

• 您可以创建一个变量函数并从调整大小调用它:

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

我建议你这个 Mozilla的文档的条目.

Answer 3

你无法削减中间人。你唯一能做的就是把他匿名（这是一个词吗？），这样你就可以更容易地忘记他：

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

实际上，自从我深入研究这个问题以来，让我们寻求一个通用的解决方案：

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));

正如您所看到的，当其中一个处理程序返回 false 时，传播就会停止。如果需要，您可以更改它以检查事件的状态，因为它将更符合标准。但作为一个起点，我想说它非常好。