我怎樣才能使這個簡單的代碼更有效率？

我是一般的編程新手，由於我純粹是自學，所以缺乏一些編程的基礎知識。這是一些簡單的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

我怎樣才能使這個簡單的代碼更有效率？

回答

相關問題