2

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

3 回答 3

3

尝试在您的代码中添加类似这样的内容：

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-14T15:41:01.963 回答
2

您可以使用以下方式限制调整大小的最大速率：

$(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-14T15:37:01.463 回答
0

当我遇到这样的问题时，我已经制作了应该是身体的身体大小百分比的元素，并将它们绝对定位在我希望它们所在的父元素内。诚然，它需要更多的工作才能将所有部分放在正确的位置，但可能不如积极调整大小那么多。

于 2012-07-14T15:39:30.463 回答