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

Thu, 02 Nov 2023 03:35:29 +0000

Метод 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);

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

Thu, 22 Oct 2020 14:21:20 +0000

Если нам нужно отменить запуск 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 on Jeremy Jackson

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

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