为什么在加载而不是在窗口调整大小时触发此on（'resize'）事件？

Question

我将以下代码包装在$(document).ready(function(){}); ：

var sizeMapContainer = function(n) {
    var w = $(window).innerHeight();
    var h = $('#sl-header-container').outerHeight();
    var f = $('.oev-form-container').outerHeight();
    var m = w - h - f;
   $('#map-container').outerHeight(m);
}
sizeMapContainer(1);
$(window).on('resize', sizeMapContainer(2));

为什么在页面加载时调用sizeMapContainer两次，但是在调整窗口大小时却没有调用两次？

Answer 1

您正在调用函数，而不是将事件绑定到函数。 它应该是：

$(window).on('resize', function() {
    sizeMapContainer(2);
});

Answer 2

这就是问题所在

$(window).on('resize', sizeMapContainer(2));

“ on”的第二个参数是将在“ resize”事件发生时运行的函数。 预计不会在您的（2）结尾处调用它。 它是当场运行您的sizeMapContainer（）函数，而不是让'resize'事件决定何时发生。 如果删除（2），则在调整大小时会触发sizeMapContainer（）函数。

function myName(){
    return "Aaron";
}

console.log( myName ); //gives you the function itself
console.log( myName() ); //gives you Aaron

因此，他所做的就是创建一个匿名函数，该函数运行您的函数并为您传递参数。

希望这有助于清理问题。