jquery - 如何在浏览器调整大小时最有效地检查某些 "breakpoints"？

Question

我正在使用一些定义了两个断点的响应式设计:

Mobile > max-width 320px
Tablet portrait > max-width 767px

在桌面上，我有很多动画 + Javascript 的高级功能。在移动设备和平板电脑上，我希望简化和禁用一些 JS +“重建”一些 DOM 元素。

我想知道确定某些断点(就宽度而言)的最有效方法是什么？我在这里思考了很多关于性能的问题。

我知道我可以简单地在调整大小时检查窗口宽度，例如:

$( window ).resize(function() {
  if ($(window).width() > 320 && $(window).width() < 400) {
    //mobile
  }
  if ($(window).width() > 401 && $(window).width() < 768) {
    //tablet
  }
  if ($(window).width() > 769) {
    //desktop
  }
});

但这似乎是一个非常“昂贵”的操作？

任何可用于此目的的轻量级库的建议也非常受欢迎!

Answer 1

我经常遇到这个问题，但没有找到完美的解决方案。然而，有一种解决方法似乎不太需要资源。通过在 resize() 函数中使用超时并不断清除它，您可以确保您的代码仅在视口(viewport)停止调整大小后运行。

var resizeTimer, width;
var mobile = tablet = desktop = false;

$(window).resize(function() {
    // clear the timeout
    clearTimeout(resizeTimer);

    // execute breakpointChange() once the viewport 
    // has stopped changing in size for 400ms
    resizeTimer = setTimeout(breakpointChange(), 400);
});

function breakpointChange() {
    // use vanillajs window.innerWidth 
    // instead of jQuery $(window).width() as suggested by simon
    width = window.innerWidth;

    if (!mobile && width < 400) {
        tablet = desktop = false;
        mobile = true;
        console.log('is mobile');
    }

    if (!tablet && width > 401 && width < 768) {
        mobile = desktop = false;
        tablet = true;
        console.log('is tablet');
    }

    if (!desktop && width > 769) {
        mobile = tablet = false;
        desktop = true;
        console.log('is desktop');
    }
}
$(window).resize();

这当然不是最好的方法，但它会阻止您的代码不断运行。请随意添加我的答案和/或纠正我。这是fiddle