javascript - 在窗口调整大小时使用 Javascript 更改 div 宽度太麻烦

Question

对于大多数浏览器/计算机来说，使用 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
  }

Answer 1

尝试在您的代码中添加这样的内容:

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 ，它将在设置 throttling 之前等待 x 毫秒数为 false。如果它被执行并且 throttling 设置为 true，它不会执行任何操作。

所以基本的效果就是，你的函数最多只能在给定的时间窗口内执行一次。所以你只是在限制速率。

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