Question

我是一般的编程新手，因为我纯粹是自学成才，所以我缺乏一些编程的基础知识。这是我写的一些简单的jQuery，以确保站点的包装器延伸到页脚的开头，即使内容不足：

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
});

我定义了页脚的高度。然后我得到视口的高度。然后我从视口中减去页脚的高度。然后我将该高度应用于#main元素。我知道我可以使用jQuery来获取页脚的高度，但是我遇到了问题，并且由于某种原因它无法正常工作。

我之前重复了代码，但是在$('window').resize()函数之外，所以它在页面加载时运行一次。

我觉得我可以把它变成一个函数，因为它重复了两次。另外，我在这里问的主要原因是，如果我快速调整浏览器大约几秒钟，我的浏览器就会因为这段代码而耗尽CPU。

如果这不是正确的网站，请道歉。

Answer 1

您可以在绑定事件处理程序后以编程方式触发窗口上的resize事件：

$(window).resize(function() {
    // your code here
}).resize();

这可以节省您在触发实际// your code here事件之前复制函数外部的resize部分。

您提到的CPU问题可能与您函数中的实际代码（这相对微不足道）关系不大，而更多地与触发的resize事件的数量有关。取自the jQuery docs for .resize()：

调整大小处理程序中的代码绝不应该依赖于调用处理程序的次数。根据实施情况，调整大小事件可以在调整大小正在进行时连续发送（在Internet Explorer和基于WebKit的浏览器（如Safari和Chrome）中的典型行为），或者仅在调整大小操作结束时发送一次（典型行为在其他一些浏览器，如Opera）。

Answer 2

一种方法可以防止它在调整大小时吃掉你的cpu，这只会在调整大小结束时发生这样的事情：

function afterResize()
{
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}

var timeout = null;
$(window).resize(function() 
{
    clearTimeout(timeout);
    timeout = setTimeout(function(){ afterResize(); }, 100);    
});

这是一个jsfiddle http://jsfiddle.net/RxRcQ/1/

Answer 3

你所做的很好，因为你需要在window.resize（）事件上调用它，因为这会导致视口发生变化。

正如许多人所建议的，手动触发resize事件是有益的。

要增强算法，您可以使用更少的变量。如下所示。

    var postResize;
    $(window).resize(function() {
            clearTimeout(postResize);
            postResize = setTimeout(function() {
                    var footerHeight = 147;
                    $("#main").height($(window).height() - footerHeight);
            }, 100);
    }).resize();

上述算法增加了性能增强：在用户停止调整窗口大小100ms之前，它不会进行视口计算。当您将窗口大小调整为400-500像素（例如）时，这会使函数调用一次（而不是400-500次调用）。

希望这会有所帮助：）

Answer 4

只需自己触发调整大小事件。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).resize();

虽然取决于您的内容，但您可能希望等到窗口加载后才能执行此操作。

$(window).resize(function() {
    var footerHeight = 147;
    var windowHeight = $(window).height();
    var properHeight = windowHeight - footerHeight;
    $('#main').height(properHeight);
}).on("load",function(){
    $(window).resize();
});

我怎样才能使这个简单的代码更有效？

4 个答案: