使用JavaScript調整div寬度太麻煩了調整窗口大小

重新調整窗口大小的DIV使用JavaScript對於大多數瀏覽器/計算機來說太重了嗎？我這樣做，因爲只是設置百分比的寬度只適用於父元素。我似乎無法使其成爲身體的一部分，而不考慮（在DOM樹上）我想要調整大小的元素和身體之間的其他父元素。使用JavaScript調整div寬度太麻煩了調整窗口大小

function resize_columns() { 
    var d = getWindowSize(); 
    var body_width = d.x; 
    var fch_width = body_width * .15; 
    var pnh_width = body_width * .25; 
    $('.for_customer_div').css('width', fch_width + 'px'); 
    $('.for_customer_header').css('width', fch_width + 'px'); 
    $('.project_name_header, .project_name_div').css('width', pnh_width + 'px'); 
    $('.line_item_div').css('width', pnh_width + 'px'); 
} 
$(document).ready(function() { 
    resize_columns(); 
}); 
$(document).ready(function() { 
    window.onresize = function(event) { 
    resize_columns(); 
    } 
}); 

function getWindowSize() { 
    var w = window, 
    d = document, 
    e = d.documentElement, 
    g = d.getElementsByTagName('body')[0], 
    x = w.innerWidth || e.clientWidth || g.clientWidth, 
    y = w.innerHeight || e.clientHeight || g.clientHeight; 
    var dimensions = { 
    x: x, 
    y: y 
    }

來源

2012-07-14 1252748

是的，每一次「調整大小」事件都是非常昂貴的。最好只是調整一下調整大小的最大值，也許每四分之一大概只調整一次。這取決於你想改變多少DOM。瀏覽器在拖動鼠標時觸發許多「調整大小」事件。 – Pointy 2012-07-14 15:34:25

嘗試添加在你的代碼是這樣的：

function throttle (func, wait) { 
    var throttling = false; 
    return function(){ 
     if (!throttling){ 
      func.apply(this, arguments); 
      throttling = true; 
      setTimeout(function(){ 
       throttling = false; 
      }, wait);    
     } 
    }; 
}

然後調用：

window.onresize = throttle(function() { 
    resize_columns(); 
}, 20);

這將限制的時間resize_columns數號碼將被調用來最大的一次，每20毫秒。

說明：

油門函數接受兩個參數：要執行的功能，以及超時時間。然後它返回一個新函數，並引用throttling變量作爲標誌。所以，就onresize而言，throttle看起來就像它返回的內部函數。每次執行該功能時，都會顯示「throttling設置爲false？」。如果是，它繼續並執行你的功能。然後它將throttling設置爲true，並創建一個setTimeout，它將等待x毫秒，然後將throttling設置回false。如果它被執行並且throttling被設置爲true，則它不執行任何操作。

所以基本的效果是，你的函數最多隻能在給定的時間窗口內執行一次。所以你只是限速。

我知道這可能不是一個很好的解釋，但我認爲關閉封閉的全面概述會比今天早上我願意咀嚼的更多一點。

來源

2012-07-14 15:41:01

感謝您發佈此信息;你認爲你可以解釋一下它是如何工作的？ – 1252748 2012-07-14 15:48:22

我認爲這對於星期六早晨來說實際上是一個很好的解釋。代碼工作也非常出色。非常感謝你！ – 1252748 2012-07-14 16:06:41

您可以在上限，你的東西調整這樣的最高速率：

$(window).resize(function(minTime) { 
    var lastResize = 0; 
    return function(event) { 
    var now = new Date().getTime(); 
    if (now - lastResize > minTime) { 
     lastResize = now; 
     resize_columns(); 
    } 
    }; 
}(250)); // 250 millisecond minimum interval between resize changes

來源

2012-07-14 15:37:01 Pointy

每一次新的'''日期'''似乎也是一項沉重的工作 – 2012-07-14 15:39:36

@TorrentLee這是真實的，但它不像重新渲染通道那麼接近任何工作。另一種選擇可能是肯尼斯給出的答案，但是爲了事件管理工作的'gettimeofday（）'調用的好處或好壞的權衡是否很難衡量。 – Pointy 2012-07-14 15:47:07

非常感謝。「event」在這裏指的是什麼？它是如何使用的？ – 1252748 2012-07-14 15:49:27

當我有這樣我做了元素的問題，應該是一個百分比身體大小的孩子，並將他們定位在我希望他們成爲的父母元素之內。無可否認，它需要做更多的工作才能將所有部分都放在正確的位置，但可能不會像調整大小那麼重要。

來源

2012-07-14 15:39:30 Rorrik

使用JavaScript調整div寬度太麻煩了調整窗口大小

回答

相關問題