Question

我想从变量中添加一些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());
    });
});

Answer 1

您需要debounce调整大小事件，以便仅在调整大小完成时触发。

这是必需的，因为 -

在IE，Safari和Chrome中，只要用户继续调整窗口大小，就会触发许多调整大小事件。

Opera使用尽可能多的resize事件，但在调整大小结束时将它们全部触发。

虽然，Firefox会在调整大小结束时触发一个resize事件。

以下是我对this question的回答的摘录。

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

Answer 2

在adjustStyle函数中，您可以使用$(window).off('resize')删除事件处理程序，或者只有一个默认为true的布尔值，但在第一次运行时设置为false。

Answer 3

您正在做的是将值附加到页面，或者只是将它们添加到页面中。你想要做的只是取代价值。使用.html（）函数代替.append（）。

窗口调整大小时，HTML会多次附加

3 个答案: