javascript - 在窗口调整大小时使用Javascript过于繁琐的更改div宽度

对于大多数浏览器/计算机而言，使用Javascript在窗口调整大小上调整DIV的大小是否太繁重？我这样做是因为仅以百分比设置宽度仅相对于父元素有效。我似乎无法使它占主体的百分比，而没有考虑要调整大小的元素(在DOM树上)与主体之间的其他父元素。

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
  }

最佳答案

尝试在代码中添加如下内容:

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，则它什么都不做。

因此，基本的效果是，在给定的时间范围内，您的函数最多只能执行一次。所以你只是限制速率。

我知道这可能不是一个很好的解释，但是我认为全面的闭包概述比今天早上我愿意咀嚼的要多。