Как использовать 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 секунды, или как только пользователь перестанет перетаскивать окно, может быть?

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

P.s. когда я говорю точки останова, я имею в виду, что у меня есть настройки ширины для Mobile, BigMobile, Tablet, Retina Displays, Tablet.

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

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

Answer 1

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

var t = null; 

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

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

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