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

Question

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

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

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

这确实有效，但是显然效率不高。例如，如果我将窗口大小从 780 像素调整为最大宽度 (1024 像素)，即使如此，事件也会被触发。或者即使我将尺寸从 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);

})

希望这有帮助