javascript 在窗口调整大小时调用多个函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19864351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Call multiple functions on window resize
提问by rbyrne
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
谢谢
采纳答案by Tibos
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.
如您所见，当其中一个处理程序返回 false 时，传播将停止。如果需要，您可以更改它以检查事件的状态，因为它更符合标准。不过，作为一个起点，我会说它非常好。
回答by Tim Ricker
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”的自定义事件进行触发调用：
$(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:
我可能在代码中的某个地方想要执行任务 A：
$(window).on("window:resize", function (e) {
//do some task A
})
And also perform task B somewhere else:
并在其他地方执行任务 B：
$(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/
在此处阅读自定义事件：https: //api.jquery.com/trigger/
回答by Jonathan Naguin
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);
您可以创建一个匿名函数并调用其中的其余函数：
$(window).resize(function(){ checkNav(); checkWidth(); checkSlider(); });您可以创建一个变量函数并从调整大小调用它：
var resizeHandler = function(){ checkNav(); checkWidth(); checkSlider(); }; $(window).resize(resizeHandler);
I recommend you thisentry of Mozilla's documentation.
我向您推荐Mozilla 文档的这个条目。
回答by Nearpoint
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?
当我调整大小时，它会同时注销 1 和 2。所以看起来你可以绑定多个函数来调整大小并且它不会覆盖前一个。我正在用 chrome 测试，不知道这是否适用于跨浏览器？
