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

您需要对resize 事件进行去抖动，使其仅在 resize 完成时触发。

这是必需的，因为 -

  • 在 IE、Safari 和 Chrome 中，只要用户继续调整窗口大小，就会触发许多调整大小事件。
  • Opera 使用尽可能多的调整大小事件，但在调整大小结束时将它们全部触发。
  • 虽然，Firefox 在调整大小结束时会触发一个调整大小事件。

以下是我对这个问题的回答的片段。

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

您正在做的是将值附加到页面，或者只是将它们添加到那里。听起来你想做的只是替换值。使用 .html() 函数代替 .append()。

于 2012-09-06T16:35:25.323 回答