1

画面サイズを小さくするために変数からHTMLコンテンツを追加したいのですが、ブラウザのサイズを変更すると、コンテンツは追加されますが（必要に応じて）、ウィンドウを移動し続けると、HTMLの複数のコピーが追加され続けます。

どうすればこれを防ぐことができますか？

これは私がしていることです：

function adjustStyle(width) {
      width = parseInt(width);
        if (width < 700) {
            $('ul.nav li.top ul.submenu').removeAttr("style");
            $('body').append(str);  // this is when I am having the problem appending

        } else if (width >= 700) {
            $('ul.nav').removeAttr("style");
            $('.form-wrapper').removeAttr("style");
            var toggle = function(direction, display) {
            return function() {
              var self = this;
              var ul = $('ul.submenu', this);
              if( ul.css('display') === display && !self['block' + direction] ) {
                self['block' + direction] = true;
                ul['slide' + direction]('fast', function() {
                  self['block' + direction] = false;
                });
              }
            };
          };
          $('ul.nav li.top').hover(toggle('Down', 'none'), toggle('Up', 'block'));
          $('ul.nav li.top ul.submenu').hide();
          $('#gallery').remove();
        } else {

        }
    }
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});
4

3 に答える 3

1

サイズ変更が完了したときにのみ発生するように、サイズ変更イベントをデバウンスする必要があります。

これが必要な理由は-

  • IE、Safari、およびChromeでは、ユーザーがウィンドウのサイズ変更を続ける限り、多くのサイズ変更イベントが発生します。
  • Operaは同じ数のサイズ変更イベントを使用しますが、サイズ変更の最後にそれらすべてを起動します。
  • ただし、Firefoxはサイズ変更の最後に1つのサイズ変更イベントを発生させます。

以下は、この質問に対する私の回答の抜粋です。

var resizeTimer = null;    

$(window).resize(function(){

   clearTimeout(resizeTimer); //ignore previous trigger

   resizeTimer= setTimeout(function(){ //wait to execute handler again
     //execute actual handler here
   }, 10);
});

これに加えて、コンテンツを追加するためのプレースホルダーがあることをお勧めします-

$('body #appendTarget').html(str); //Since .append() will anyways append multiple times
于 2012-09-06T16:34:19.877 に答える
0

AdjustStyle関数内で、$(window).off('resize')デフォルトでtrueに設定されているが、最初の実行時にfalseに設定されているブール値を使用してイベントハンドラーを削除するか、ブール値を設定することができます。

于 2012-09-06T16:34:46.393 に答える
0

あなたがしているのは、ページに値を追加するか、そこにあるものに値を追加することです。あなたがやりたいことのように聞こえるのは、値を置き換えるだけです。.append（）の代わりに.html（）関数を使用します。

于 2012-09-06T16:35:25.323 に答える