javascript - 如何延迟或减少处理密集度地使用 JavaScript OnResize

Question

我正在尝试编写一个 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，或者一旦用户停止拖动窗口就可以？

那样的话，处理强度会大大降低。

附言当我说断点时，我的意思是我有移动设备、BigMobile、平板电脑、视网膜显示器、平板电脑的宽度设置。

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

如何检测断点变化而不会引起对 Resize 的密集处理。关于这个方向的任何提示？

Answer 1

使用 setTimeout 和 clearTimeout。

var t = null;

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

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

在拖动过程中，超时总是被清除并且什么也没有发生。但是当用户停止拖动时，它会运行最后一个 setTimeout 并将执行您的代码。