Question

我从表面上知道这听起来像是一个愚蠢的问题，但我建立了很多响应式网站，因此在窗口调整大小功能时运行了很多我的脚本，当平板电脑等从风景转为纵向时

我的问题实际上是脚本注册窗口调整大小的增量是什么，例如它是逐像素的吗？

我目前想要重建我的很多脚本，将它们分成宽度范围的事件监听器，以期加快脚本速度。作为一个例子下面的这个脚本，让我们说在某些点上我想要一个div来改变宽度，

function resizeFrame() {
  var wWidth = $(window).width()
  if ((100 < wWidth) && (wWidth < 500)){
    $('.sample').width(300);
  }
  else if ((500 <= wWidth) && (wWidth < 900)){
    $('.sample').width(700);
    }
  else{
    $('.sample').width(900);
  }
};

jQuery(function($){
  $(window).resize(resizeFrame);
});

在窗口调整大小期间，当div满足条件时，div会得到一个宽度，或者在调整大小期间，div会在每次增量时调整为相同的值吗？

修改

这个脚本是一个帮助概述我的问题的例子，我知道有更简单的方法来实现这个目标。

Answer 1

START EDIT 目前在调整大小期间，div会在每次增量时调整为相同的值。要回答这个问题，resize事件会非常频繁地触发 - 每次都执行很多处理/ DOM操作的速度太快。（请参阅下面的建议，以减少志愿内部代码的执行次数。） END EDIT

似乎您的条件不正确以获得所需的效果（代码在更改为不同的宽度范围时仅执行一次）。也许你应该尝试考虑当前的div宽度：

function resizeFrame() {
  var wWidth = $(window).width()
  var currentWidth = $('.sample').width();

    // for debug
   var updated = false;


  if ((currentWidth != 300) && (wWidth >= 100) && (wWidth < 500)){
    $('.sample').width(300);
      updated = true;
  }
  else if ( (currentWidth != 700) && (wWidth >= 500) && (wWidth < 900)){
    $('.sample').width(700);
      updated = true;
  }
  else if (currentWidth != 900 && wWidth >= 900) {
    $('.sample').width(900);
      updated = true;
  }

     // for debug
    $('.sample').html("window:" + wWidth + " div:" +  currentWidth + " updated: " + updated);
};

jQuery(function($){
  $(window).resize(resizeFrame);
});

查看我的fiddle

Answer 2

根据我最好的猜测，它的触发频率取决于你运行脚本的机器。如果机器速度很快，那么它将比机器运转时更频繁地触发。但永远不会少，它会执行相同的次数。

http://jsfiddle.net/YA426/

$(window).resize(function(){
    console.log("Resize")
})

如果您运行我的示例并调整内部窗口的大小，它将通过逐个像素的大小调整来触发。如果你调整浏览器窗口的大小，它会触发更少的内容，但最后会在一个块中。

我的答案完全基于这个例子，所以我很可能错了：）

jQuery调整窗口脚本执行的频率

2 个答案: