7

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

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

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

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

我只是不知道写下来！我能找到的最好方法是在窗口调整大小中调用一个函数，然后调用三个函数，但想去掉这个中间人函数。

谢谢

4

4 回答 4

22

我通过附加一个全局处理程序来实现这一点，该处理程序随后对我命名为“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/

于 2015-04-28T10:40:12.153 回答
9

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

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

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

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

    var resizeHandler = function(){
   checkNav();
   checkWidth();
   checkSlider();
};

$(window).resize(resizeHandler);

我向您推荐Mozilla 文档的这个条目。

于 2013-11-08T16:57:04.770 回答
4

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

$(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 时，传播将停止。如果需要，您可以更改它以检查事件的状态，因为它更符合标准。不过，作为一个起点，我会说它非常好。

于 2013-11-08T16:57:47.940 回答
0

我刚试过这个

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

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

当我调整大小时，它会同时注销 1 和 2。所以看起来你可以绑定多个函数来调整大小并且它不会覆盖前一个。我正在用 chrome 进行测试，我想知道这是否适用于跨浏览器？

于 2015-09-21T03:34:48.530 回答