2

我正在尝试编写一个 JavaScript/jQuery 函数，我可以使用它来调用其他函数，或者根据用户是否将窗口大小调整到超出断点阈值，或者他们是否将设备从横向旋转到纵向来设置 CSS/LESS。

目前我正在使用以下内容：

$(window).on('resize', function() {
// IF/Switch Case statement, check current width of window is > mobile, or tablet, or desktop
    // Do stuff depending on which size the window is at currently.
// End if/Switch case.
}

但这并不理想，因为它不可避免地会给用户体验带来压力/延迟，因为当用户将窗口拖得越来越小时，该功能实际上可能会运行很多次。

相反，有没有办法在断点更改时触发，或者甚至可能每 1 或 2 秒运行一次 onResize，或者一旦用户停止拖动窗口？

这样，处理强度将大大降低。

Ps 当我说断点时，我的意思是我有 Mobile、BigMobile、Tablet、Retina Displays、Tablet 的宽度设置。

但仅仅是移动设备、平板电脑、台式机也可以是一种折衷方案。

如何在不导致密集处理 onResize 的情况下检测断点更改。关于这个方向的任何提示？

4

1 回答 1

4

使用 setTimeout 和 clearTimeout。

var t = null;

window.onResize(function() {
   if (t!= null) clearTimeout(t);

   t = setTimeout(function() {
       ...
   }, 500);
}}

在拖动期间，超时总是被清除并且没有任何反应。但是当用户停止拖动它时，它会运行最后一个 setTimeout 并执行您的代码。

于 2014-09-19T13:49:46.043 回答