Javascript

javascript  →  removeEventListener и bind правильное использование

published 02 November 2023

Метод bind у функции возвращает новую функцию, поэтому нельзя делать вот так:

function onClick() { console.log('hello kitty');}

button.addEventListener('click', onClick.bind(this));

button.removeEventListener('click', onClick.bind(this));

Отписки не произойдет, на выходе будет две разные функции, для отписки надо сделать так:

function onClick() { console.log('hello kitty');}

const onClickFn = onClick.bind(this);

button.addEventListener('click', onClickFn);

button.removeEventListener('click', onClickFn);
javascript

javascript  →  Интересный способ сброса setTimeout и setInterval

published 22 October 2020

Если нам нужно отменить запуск setTimeout или setInterval, то обычно используем такую конструкцию:

const timeoutId = setTimeout(() => {}, 100);

clearTimeout(timeoutId);

Основное неудобство в запоминании timeoutId, но можно сделать ф-цию обертку, которая позволит нам избавиться от timeoutId:

function timer(cb, timeout) {
  const timeoutId = setTimeout(cb, timeout);
  return () => clearTimeout(timeoutId);
}
const destroyTimer = timer(()=> {}, 1000);

destroyTimer();

За счет сохранения timeoutId внутри функции за счет замыкания, нам можно забыть о timeoutId

Такой же трюк можно провернуть и с EventListener:

javascript
читать далее