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 ミリ秒に 1 回に制限されます。

説明：

スロットル関数は、実行する関数とタイムアウト期間の 2 つのパラメーターを受け入れます。throttling次に、フラグとして機能する変数への参照を含む新しい関数を返します。したがって、onresize関係する限り、throttleそれが返す内部関数のように見えます。その関数が実行されるたびに、「is throttlingset to false?」と表示されます。そうであれば、先に進んで関数を実行します。次に、 に設定throttlingし、に戻す前に x ミリ秒待機trueする を作成します。実行されてに設定されている場合、何もしません。setTimeoutthrottlingfalsethrottlingtrue

したがって、基本的な効果は、指定された時間枠内で関数を最大で 1 回しか実行できないということです。したがって、レート制限を行っているだけです。

それが素晴らしい説明ではないかもしれないことはわかっていますが、閉鎖の本格的な概要は、今朝噛んでも構わないと思っているよりも少し食い物になると思います.

于 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 に答える