Question

基本上，如果用户将浏览器的大小从X增加到Y，我想要做的是触发事件。提供X =任何小于750像素，Y大于750像素。

现在，我正在做这样的事情：

$(window).resize(function(){
    if ($(window).width() >= 750) {
        console.log('750 or more');
    }
});

然而，这有效，但显然效率不高。例如，如果我将窗口的大小从780px调整到最大宽度（1024px），即使这样，事件也会被触发。或者即使我将大小从800px减小到780px，我仍然显然得到了控制台输出。

如何让它正常工作？

Answer 1

您需要 setTimeout 才能进行检查。

示例：

var resizeTimer;

$(window).resize(function() {


 clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $(window).width();

    // ...
    // do your screen check here
    // ...


  }, 1);

})

希望这有帮助

Answer 2

由于在达到最大宽度后删除了on resize事件导致on resize函数不再被调用，即使宽度低于1024px，也没有真正解决此问题的方法。

也许将来可能只在某些条件下进行调整大小事件。

您还可以使用on resize end事件仅在调整窗口大小后触发该功能，请记住，这可能会导致在用户调整窗口大小后而不是在调整窗口大小期间发生视觉变化。

有多种方法可以让on resize事件更好地执行：http://bencentra.com/code/2015/02/27/optimizing-window-resize.html

Answer 3

这是一个使用脚本的限制版本，可能是一个好的开始

Fiddle demo

(function(timeout,bigger) {     // local static var - timeout,bigger

      window.addEventListener("resize", function(e) {
        if ( !timeout ) {
          timeout = setTimeout(function() {
            timeout = null;
            actualResizeHandler(e);

            // Set the actual fire rate
          }, 66);
        }
      }, false);

      function actualResizeHandler(e) {
        // handle the resize event
        
        if (window.innerWidth >= 750 && !bigger) {
          //passed above (or equal) 750
          document.querySelector('span').style.color = 'blue';
          document.body.innerHTML += '<br>above 750';
          
        } else if (window.innerWidth < 750 && bigger) {
          //passed below 750
          document.querySelector('span').style.color = 'red';
          document.body.innerHTML += '<br>below 750';
        }
        bigger = (window.innerWidth >= 750);

      }
      
      // run once at load
      bigger = (window.innerWidth < 750);
      actualResizeHandler();
    
    }(null,false));

<span>This text is blue on big and red on small</span>

这里有一个使用CSS媒体查询

span {
  color: red;
}


@media screen and (min-width: 750px) {
  span {
    color: blue
  }  
}

<span>This text is blue on big and red on small</span>

如何使用jQuery检测浏览器屏幕宽度增加超过某一点？

3 个答案: