jquery - 如果包装在其他函数中，则仅在窗口调整大小时调用函数

Question

我有一个垂直居中网站的功能：

    function centerWebsite(){
        $vpheight = $(window).height();
        $headerheight = $('header').height();
        $contentheight = $headerheight + $('#content').height();
        $margin = Math.floor(($vpheight - $contentheight)/2);

        $logospacing = $('#logo').css('margin-top');

        if($vpheight > ($contentheight + $logospacing)) {
            $margin = $margin - $logospacing;
        }

        $extendedmargin = $headerheight + $margin;

        $('html').height($vpheight);
        $('body').height($vpheight);
        $('header').css('padding-top', $margin);
        $('#content').css('padding-top', $extendedmargin);
        $('#gallerynav').css('padding-top', $extendedmargin);
    }

当页面准备好时应该调用这个函数：

$(document).ready(centerWebsite());

每次调整窗口大小时，我都想调用相同的函数。我试着这样做：

$(window).resize(centerWebsite());

但这行不通。解决方案是：

$(window).resize(function() {
    centerWebsite();
});

我真的需要创建一个函数来调用另一个函数吗？

Answer 1

通过包含括号，您正在执行函数调用。您希望将函数作为参考传递，在这种情况下，您应该传递变量 - 不带括号。

$(document).ready(centerWebsite);

如果你在你的centerwebsite()函数中添加一个 console.log，你会看到当你调用它时它实际上被调用了$(document).ready(centerWebsite());。

Answer 2

删除括号：

$(window).resize(centerWebsite);

EDIT NOTE: review this question for some information on callbacks: What are jQuery hooks and callbacks?