“Debouncing”解释说：

Question

我必须根据jQuery的浏览器大小对页面进行不同的样式设置。但是，当用户将页面放大时，我们仍然会使用应该用于较小屏幕的jQuery。

我无法使用媒体查询，因为某些元素的格式为.width()。

要求调整大小if the browser is over or under a certain size的最佳方式是什么？调用大小调整是否存在许多性能问题（假设它每秒被调用多次？）

Answer 1

使用jQuery，您可以获得宽度和高度

$( window ).resize(function() {
    var width = $(window).width();
    var height = $(window).height();
});

Answer 2

我建议不要只是挂钩窗口调整大小事件，而是调整/去抖调整大小事件以避免性能问题。

“Debouncing”解释说：

节流是重复事件发生率的降低。节流   有助于将mousemove事件减少到更低，可管理的速度，   例如。

去抖更准确。去抖确保恰好一个   信号是为可能发生多次的事件发送的 - 或者   甚至在很长一段时间内数百次。只要了   事件发生得足够快，每次至少发生一次   检测期间，信号不会发送！

^{来源：http://unscriptable.com/2009/03/20/debouncing-javascript-methods/}

代码：

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

^{代码（无耻地）取自：http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/}

See example codepen（取自上述链接/博客文章中的评论）

Answer 3

您可以像这样查找resize事件并获取宽度和高度

$(window).resize(function() {
    var width = $(window).width();
    var height = $(window).height();
});

取自https://api.jquery.com/resize/

关于性能的问题，这取决于浏览器。有些人等待调整大小停止，其他人会在变化发生时提供正在运行的Feed。

使用JavaScript调整大小时检查浏览器大小

3 个答案:

“Debouncing”解释说：

代码：