Javascript. Как узнать на сколько изменилась ширина окна браузера?

Question

Javascript. Как узнать на сколько изменилась ширина окна браузера?

Гэбриэл Профи (737), на голосовании 4 года назад

Нужно узнать, при изменении курсором окна браузера, на сколько пикселов уменьшается или увеличивается окно. document.documentElement.clientWidth - дает непрерывное значение в каждый момент времени и разницу найти не удается. Важно не только значение, но и знак +/-. Т. е. изменил размер окна и в консоли пишет, например: - 356px, +608px. Я новичок в js поэтому не судите строго. Заранее благодарен!

Answer 1

В обработчике события 'resize' вычисляешь разность текущей ширины, и предыдущей (которую инициализируешь перед добавлением обработчика), затем текущую запоминаешь как предыдущую.
Разумно будет применить к обработчику debounce паттерн, так как при ресайзе курсором, событие возникает очень часто. К тому же, это требуется по задаче (для определения момента когда ресайз завершен).
То есть, обработчик в общем виде будет иметь примерно такой вид:
window.addEventListener('resize', debounce(function () {
const currW = document.documentElement.clientWidth;
doSomethingWith(currW - prevW); // либо в переменную, если внешний код отслеживает
prevW = currW; // prevW объявлена в LE обработчика
}, debounceInterval));