Как наследовать значение от методов во Vue?

Question

[Александр Иванов]

<div @mouseenter="mouseEnter"  @mouseleave="mouseLeave">
                <h1>Hover me!</h1>
            </div>

methods: {
            mouseEnter() {
                setInterval(function() {
                    console.log( "тик" );
                }, 500);
            },
            
            mouseLeave() {
                setTimeout(function() {
                    this.mouseEnter()
                    console.log( "достаточно" );
                }, 1);
            }
      }

Выше пытаюсь остановить выполнение функции

консоль жалуется на на то this.mouseEnter() - не функция

Answer 1

[0xD34F]

пытаюсь остановить выполнение функции

Что-то я такого у вас вообще не вижу. Для отмены действия setInterval надо вызвать метод clearInterval, ну и конечно предварительно сохранить id таймера:

data: () => ({
  intervalID: null,
}),
methods: {
  mouseEnter() {
    this.intervalID = setInterval(() => {
      console.log('тик');
    }, 500);
  },
  mouseLeave() {
    clearInterval(this.intervalID);
    this.intervalID = null;
  },
},

Comments

[Александр Иванов]

Он там был, видимо в конце дня не вижу ничего )

Answer 2

[Klein Maximus]

У Вас контекст this не передается внутрь setTimeout.
Нужно либо использовать что-то типа let self = this, либо стрелочные функции.

Но если нужно остановить выполнение setTimeout или setInterval, то нужно сохранять эти счетчики и применять к ним clearInterval и clearTimeout.

https://learn.javascript.ru/settimeout-setinterval

Answer 3

[Evgeny Kulakov]

mouseLeave() {
                setTimeout(() => {
                    this.mouseEnter()
                    console.log( "достаточно" );
                }, 1);
            }