Как использовать 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.
}

Но это не идеально, поскольку это неизбежно создаст нагрузку / задержку для пользовательского опыта, поскольку функция может буквально запускать нагрузки раз, когда пользователь перетаскивает окно все больше и меньше.

Вместо этого, есть ли способ просто срабатывать при изменении точек останова, или, может быть, даже запускать onResize каждые 1 или 2 секунды, или, возможно, когда пользователь прекратил перетаскивать окно?

Таким образом, интенсивность обработки будет значительно меньше.

PS Когда я говорю о точках останова, я имею в виду, что у меня есть настройки ширины для мобильных устройств, BigMobile, планшетов, дисплеев Retina, планшетов.

Но просто мобильный, планшетный, настольный компьютер тоже может быть компромиссом.

Как я могу обнаружить изменения точки останова, не вызывая интенсивную обработку onResize. Любые советы, в каком направлении идти с этим?

Answer 1

Используйте setTimeout и clearTimeout.

var t = null;

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

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

Во время перетаскивания время ожидания всегда сбрасывается и ничего не происходит. Но когда пользователь перестанет перетаскивать его, он запустит последний setTimeout и выполнит ваш код.