Javascript jQuery调整窗口大小脚本执行的频率是多少

从表面上看，我知道这听起来像一个愚蠢的问题，但我建立了许多响应性网站，因此在窗口调整功能中运行了很多脚本，以便在平板电脑等从横向切换到纵向时使用

我的问题是，脚本记录窗口大小的增量是多少，例如，是逐像素的吗

我现在想重建我的很多脚本，将它们分离成宽度范围的事件监听器，希望能加快脚本的速度。作为下面这个脚本的一个例子，让我们假设在某些点我希望一个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);
});

函数resizeFrame（）{
var wWidth=$（窗口）.width（）
如果（（100else if（（500根据我的猜测，它触发的频率取决于您运行脚本的机器。如果机器速度快，则触发的频率将高于机器速度慢时的频率。但无论如何，它将执行相同的次数


如果您运行我的示例并调整内部窗口的大小，它将触发逐像素的大小调整。如果您调整浏览器窗口的大小，它将触发较少的内容，但最终会触发一个块

我的答案完全基于这个例子，所以我很可能是错的：）
当前在调整div大小的过程中，每次增量都会将div大小调整为相同的值。为了回答这个问题，resize事件会非常频繁地触发-太快了，无法每次执行太多处理/DOM操作。（有关减少考虑中代码执行次数的建议，请参见下文。）结束编辑

似乎您的条件不正确，无法获得所需的效果（当更改为不同的宽度范围时，代码只执行一次）。也许您应该尝试考虑当前的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);
});

函数resizeFrame（）{
var wWidth=$（窗口）.width（）
var currentWidth=$（'.sample'）.width（）；
//用于调试
var=false；
如果（（当前宽度！=300）和（宽度>=100）和（宽度<500））{
$（'.sample'）。宽度（300）；
更新=真；
}
如果（（当前宽度！=700）和（（宽度>=500）和（（宽度<900））{
$（'.sample'）。宽度（700）；
更新=真；
}
否则如果（当前宽度！=900&&wWidth>=900）{
$（'.sample'）。宽度（900）；
更新=真；
}
//用于调试
$（'.sample'）.html（“窗口：+wWidth+”div:+currentWidth+”更新：“+updated”）；
};
jQuery（函数（$）{
$（窗口）。调整大小（调整框架大小）；
});

请参见我的
BTW，有没有不使用CSS3媒体查询的理由？为什么不在css中使用@media query？？？。调整媒体大小的需要是什么div@TimWilkinson那么它是有意义的，无论如何，你应该检查matchMedia来代替，例如：超时的问题是它会导致一个可感知的延迟到更新，而在我看来，它不会延迟o公平对待用户体验我的脚本在这方面似乎工作得很好？您在什么浏览器上测试它？感谢您的输入，但如前所述，问题不是关于脚本本身，而是为了支持关于jQuery如何处理调整大小查询的更一般的问题。从您的问题来看，exerc的关注点似乎是ise与性能有关。因此，当您将窗口宽度从200调整到201，再调整到202时……每次都会执行第一个条件中的代码！这真的有必要吗？是的，这就是我的问题所在，我倾向于认为这是不必要的，上面的一些注释和答案提供了提高性能的好方法……无论是不是是否需要取决于您在调整大小事件上的具体操作……顺便问一下，您到底在做什么？？）这就是我努力准确地提出问题的地方，因为取决于网站取决于我运行的脚本，因此这是一个糟糕的例子，作为一个指南lol。一个网站我克隆了一个低于一定大小的整个菜单，其他网站影响布局，加载什么图像，列表继续，因此寻找关于如何提高性能的总体思路董事会主席。
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);
});