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

我是一般的编程新手，由于我纯粹是自学，所以缺乏一些编程的基础知识。这是一些简单的jQuery我写的，以确保网站的包装一直延伸到尾的开始，即使没有足够的内容：我怎样才能使这个简单的代码更有效率？

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

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

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

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

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

来源

2013-03-11 Brian

属于上codereview.stackexchange.com – 2013-03-11 15:02:36

感谢您的参考。我会在未来发布。 – Brian 2013-03-11 16:00:58

一种方法来防止这种情况的吃饭一边调整你的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/

来源

2013-03-11 15:06:18

我已经实现了这个到我的js文件，它似乎有所帮助。我可以忍受小的CPU使用率高峰，因为除非他们正在测试，否则人们不会调整浏览器的大小。谢谢 – Brian 2013-03-11 16:09:55

你可以只编程触发resize事件的窗口上，结合后的事件处理程序：

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

这可以节省您的实际resize事件之前复制功能来做到这一点以外的// your code here部分被触发。

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

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

来源

2013-03-11 15:04:43

我不知道我可以手动触发resize事件。超级有用，谢谢。 – Brian 2013-03-11 15:58:58

只需自己触发resize事件即可。

$(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(); 
});

来源

2013-03-11 15:05:16

你所做的很好，因为你需要在window.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次调用）。

希望这有助于:)

来源

2013-03-11 15:18:55

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

回答

相关问题