Ребят по стеку вызовов подскажите (setTimout) js

157

25 июля 2019, 19:30

Проблема в том, что после того как курсор покинул блок срабатывает clear, но запущенные таймеры (которые уже в стеке) не отменяются, как с таким бороться ?

document.addEventListener('mouseover', (e) => {
  if (e.target.className == 'bg_game1' ||
    e.target.className == 'bg_game2' ||
    e.target.className == 'bg_game3' ||
    e.target.className == 'bg_page1' ||
    e.target.className == 'bg_page2') {
    moveSlide(e.target)
  }
})
function moveSlide(target) {
  let del = 400;
  let move = 0;
  for (let i = 0; i < 3; i++) {

    timer(target, del, move)
    del += 400;
    move += -110;
  }
}
let tim;
function timer(target, del, move) {
  tim = setTimeout(() => {
    target.style.left = move + 'px';
    console.log('timeOut')
  }, del);
  document.addEventListener('mouseout', (e) => {
    if (e.target.className == 'bg_game1' ||
      e.target.className == 'bg_game2' ||
      e.target.className == 'bg_game3' ||
      e.target.className == 'bg_page1' ||
      e.target.className == 'bg_page2'
    ) {
      clearTimeout(tim);;
      console.log('clear')
    }
  })
}

Answer 1

В данном примере переменная tim хранит значение только последнего таймера, потому при mouseout, отменяется только последний объявленный таймер. Если я правильно понял Вашу задачу Вам нужно удалять предыдущий объявленный таймер в начале функции timer:

function timer(target, del, move) {
  if(tim){
    clearTimeout(tim);
  }
  tim = setTimeout(() => {
    target.style.left = move + 'px';
    console.log(del, move)
  }, del);
}