jQuery 调整窗口大小脚本多久执行一次答案

【问题标题】：jQuery how often do resize window scripts executejQuery 调整窗口大小脚本多久执行一次
【发布时间】：2014-07-11 22:07:34
【问题描述】：

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

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

我目前想要重新构建我的许多脚本，以便将它们分成宽度范围事件侦听器，以希望加快脚本的运行速度。作为下面这个脚本的一个例子，假设在某些点我想要一个 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 是否在每次增量时都被调整为相同的值？

编辑

此脚本是帮助概述我的问题的示例，我知道有更简单的方法来实现这一点。

【问题讨论】：

paulirish.com/2009/throttled-smartresize-jquery-event-handler
顺便说一句，有什么理由不使用 CSS3 媒体查询？
为什么你不在 css 中使用@media 查询？？.. 调整 div 的大小需要什么
@TimWilkinson 那么这是有道理的，无论如何，你应该检查 matchMedia，例如：developer.mozilla.org/en-US/docs/Web/API/window.matchMedia github.com/paulirish/matchMedia.js caniuse.com/matchmedia
超时的问题在于它会导致更新滞后，在我看来这对用户体验并不公平

标签： javascript jquery html

【解决方案1】：

开始编辑目前，在调整大小期间，您的 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

【讨论】：

我的脚本在这方面似乎工作正常？你在什么浏览器上测试它？并感谢您的输入，但如前所述，问题与脚本本身无关，它是为了备份有关 jQuery 如何处理调整大小查询的更一般性的问题。
从您的问题看来，练习的关注点与性能有关。因此，当您将窗口宽度从 200 调整为 201 到 202 时……您的第一个条件内的代码每次都会被执行！这真的有必要吗？？
好吧，这就是我的问题，我倾向于相信这没有必要，上面的一些 cmets 和答案提供了提高性能的好方法......
是否有必要取决于你在调整大小事件中所做的事情......顺便说一句，你到底在做什么？ :)
这是我努力准确地提出问题的地方，因为取决于站点取决于我运行的脚本，因此作为指导的坏例子哈哈。一个站点我将整个菜单克隆到一定大小以下，其他站点会影响布局，加载哪些图像，列表继续，因此寻找有关如何全面提高性能的一般想法。

【解决方案2】：

根据我的最佳猜测，它触发的频率取决于您运行脚本的机器。如果机器快，那么它会比机器慢时更频繁地触发。但无论如何，它将执行相同的次数。

http://jsfiddle.net/YA426/

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

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

我的回答完全基于示例，所以我很可能是错的:)

【讨论】：