Как заставить javascript работать на resize window?

@forest 

Для того, чтобы вызвать функцию JavaScript при изменении размера окна браузера, можно использовать событие resize в сочетании с обработчиком событий. Вот пример кода, который вызывает функцию myFunction() при изменении размера окна браузера:

1
2
3
4
5

window.addEventListener('resize', myFunction);

function myFunction() {
  // ваш код здесь
}

В этом примере мы добавляем слушателя событий resize к объекту window. Когда размер окна изменяется, браузер вызывает функцию myFunction(), которая должна содержать необходимый вам код. Вы можете заменить myFunction() на любое другое имя функции, которое вы хотите вызвать при изменении размера окна.

Например, если вы хотите изменить стиль элемента при изменении размера окна, то ваш код может выглядеть так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

window.addEventListener('resize', myFunction);

function myFunction() {
  var element = document.getElementById('my-element');
  if (window.innerWidth < 768) {
    element.style.fontSize = '16px';
  } else {
    element.style.fontSize = '24px';
  }
}

Этот код изменяет размер шрифта элемента my-element в зависимости от ширины окна браузера. Когда ширина окна меньше 768 пикселей, размер шрифта установлен на 16 пикселей, в противном случае он установлен на 24 пикселя.

@forest 

Вот как сделать так, чтобы функция выполнялась только тогда, когда пользователь закончит изменение размера окна:

1
2
3
4
5
6
7
8

let resizeTimer;
window.addEventListener('resize', function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    // ваш код здесь
    console.log('Окно было изменено');
  }, 250);
});

В этом примере мы используем таймер clearTimeout() для предотвращения немедленного выполнения функции при каждом изменении размера окна. Вместо этого, мы устанавливаем таймер на 250 миллисекунд, что позволяет выполнить функцию только после того, как пользователь закончит изменение размера окна. Вы можете изменить значение таймера на более удобное для вас.