Убить setInterval

[yaparoff]

Пытаюсь убить setInterval с помощью clearInterval. Но получается как то не очень.
Дело в том что я пытаюсь двигать один блок с помощью setInterval и все вроде бы ок, но когда блок заканчивает двигаться setInterval все равно работает . Пробую убить его с помощью clearInterval, но тогда блок движется с каким то запозданием

Пробовал решить это также с помощью requestAnimationFrame, но тогда блок тоже движется с запозданием.

Вот код https://codepen.io/anon/pen/rRJjpE?editors=1010

Работает только в этом режиме

[EvgeniySaschenko]

Скорее всего тебе нужно поместить clearInterval в setInterval и прописать условие при котором setInterval должен удалится:

timerMobileMove = setInterval(() => {
      console.log('move it')
      const leftCoord = table.getBoundingClientRect().left;
      tableHeader.style.left = `${ leftCoord }px`;
     if(условие){    
       clearInterval(timerMobileMove);
     }
    }, 1);

[yaparoff]

Скорее всего тебе нужно поместить clearInterval в setInterval и прописать условие при котором setInterval должен удалится:

осталось только понять какое условие.
например можно написать условие что таблица прекратила двигаться. Но как дать понять это JS, ведь она и так остановилась, а функция выполняется...?

[EvgeniySaschenko]

осталось только понять какое условие.
например можно написать условие что таблица прекратила двигаться. Но как?

Тогда правильным вопросом будет: "при каком условии таблица должна перестать двигаться?" т.е. она достигла определённой координаты, ширины и т.п.

[yaparoff]

т.е. она достигла определённой координаты, ширины и т.п.

Мне кажется координата может быть любой, поэтому не знаю к чему привязыватся

[EvgeniySaschenko]

Условием может быть что пользователь упёрся в правую сторону при прокрутке, тогда код будет такой:

timerMobileMove = setInterval(() => {
      console.log('move it')
      const leftCoord = table.getBoundingClientRect().left;
      tableHeader.style.left = `${ leftCoord }px`;
      let posScrollX= window.pageXOffset;
      let clientWidth= document.querySelector('body').clientWidth;
      let widthScroll= document.querySelector('body').scrollWidth;

     if(posScrollX + clientWidth - widthScroll == 0){    
       clearInterval(timerMobileMove);
     }
}, 1);

А что ты хочешь реализовать?

[yaparoff]

Условием может быть что пользователь упёрся в правую сторону при прокрутке

Это не то условие которое нужно

А что ты хочешь реализовать?

Когда пользователь на мобилках завершает движение пальцем, то нужно убить setInterval.
Есть событие touchend - но оно срабатывает когда палец убрали. А пользователь же может не убирать палец. Ну ладно, пофиг, допустим сделаем clearInterval при событии touchend
Таймер чиститься но функция все равно продолжает вызываться снова
http://skrinshoter.ru/s/180319/VNHS5lPp
Как остановить ее окончательно?
https://codepen.io/anon/pen/rRJjpE?editors=0010