使用Javascript在窗口调整大小太麻烦的更改div宽度 [英] Too cumbersome change div widths with Javascript on window resize

问题描述

在大多数浏览器/计算机上使用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 ）[0]，
x = w.innerWidth || e.clientWidth || g.clientWidth，
 y = w.innerHeight || e.clientHeight || g.clientHeight; 
 var dimensions = {
x：x，
y：y 
} 
  

解决方案

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

 （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

p>节流功能接受两个参数：要执行的功能和超时持续时间。然后它返回一个新的函数，引用 throttling 变量，作为一个标志。因此，就 onresize 而言， throttle 只是看起来像它返回的内部函数。每次执行该函数时，它说 throttling 设置为 false ？。如果是，它会继续执行您的功能。然后它将 throttling 设置为 true 并创建一个 setTimeout 将在它设置节流回到 false 之前等待x个毫秒。如果它被执行，并且 throttling 被设置为 true ，它不会做任何事情。

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

我知道这可能不是一个很好的解释，但我认为一个完整的闭包的概述将咬一点点超过我愿意今天早上咀嚼。

Is re-sizing DIVs on window-resize with Javascript too heavy for most browsers/computers? I'm doing this, because just setting widths in percentages only works in relation to the parent element. I can't seem to make it a percentage of the body, without regard to other parent elements between (on the DOM tree) the elements I would like to resize and the body.

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
  }

解决方案

Try adding something like this in your code:

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

And then call:

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

This will limit the number number of times resize_columns will be called to a maximum of once every 20 milliseconds.

Explanation:

The throttle function accepts two parameters: the function you want to execute, and a timeout duration. It then returns a new function with a reference to the throttling variable, which acts as a flag. So, as far as onresize is concerned, throttle just looks like the inner function it returns. Every time that function is executed, it says "is throttling set to false?". And if it is, it goes ahead and executes your function. Then it sets throttling to true and creates a setTimeout that will wait x number of milliseconds before it sets throttling back to false. If it gets executed and throttling is set to true, it doesn't do anything.

So the basic effect is that, at most, your function can only be executed once in a given time window. So you're just rate-limiting.

I know that might not be a great explanation, but I think a full-blown overview of closures would be biting off a little more than I'm willing to chew this morning.

这篇关于使用Javascript在窗口调整大小太麻烦的更改div宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！