vue에서 setTimeout을 사용하여 현재 라우팅에서 제거되지 않은 문제를 해결합니다.

질문:
첫 번째 페이지에서 두 번째 페이지로 이동한 후 두 번째 페이지에 머무르면 타이머가 실행됩니다.두 페이지 사이를 왔다 갔다 하면 타이머의 간격보다 낮을 때 setTimeout을 반복해서 만드는 경우도 있습니다.
원인:
우리가 페이지를 새로 고칠 때, 현재 페이지가 이전에 만든 set Timeout과 다른 타이머를 모두 지우지만, 루트 전환만으로는 지우지 않습니다.

data () {
  return {
   ct: null
  }
}，
methods: {
 start() {
 this.ct= setTimeout( () => {that.countdown(end)}, 1000)
 }
 end() {
 clearTimeout(this.ct); // 
 }
}

setInterval() 타이머도 clearInterval() 이 제거해야 합니다.
보충 지식: VUE에서 setTime Out과 setInterval에서 겪는 문제
두 함수에 대해 모두 낯설다고 믿습니다. 바로 타이머입니다. set Time Out은 한 번만 실행하고 set Interval은 반복적으로 실행합니다.
주의해야 할 것은 setInterval이 사용되지 않을 때clearSetInterval로 타이머를 닫아야 한다는 것이다.
최근 개발 과정에서 겪은 문제를 말씀드리자면, 저는 vue로 개발한 것입니다. 이 오류를 기록하는 김에.
폴링 인터페이스가 필요해서 setInterval을 사용합니다.

//  2 myFunc 。
setInterval(this.myFunc(),2000)
// 
myFunc () {
  console.log(123)
}

그러나 실제 운행 결과는 한 번만 실행되었을 뿐 순환적으로 실행되지 않았다.
왜냐하면 setInterval은 두 개의 인자를 받아들인다. 첫 번째는 실행할 함수이고, 두 번째는 시간(밀리초)이다.
여기서 내가 저지른 잘못은 내가 쓴 함수의 실행this이다.myFunc()는 함수가 아닌 실행이기 때문에 () 를 추가합니다.
그래서 나는 또 이렇게 썼다. 익명 함수를 썼는데 함수체는 내가 실행하고자 하는 것이다.

setInterval(function () {
 this.myFunc()
},2000)
// 
myFunc () {
  console.log(123)
}

이론적으로 이렇게 하는 것은 문제없다. 2초에 한 번씩this를 집행할 것이다.myFunc(), 그러나 잘못 보고되었습니다.
왜냐하면 흔히 말하는javaScript의this 문제 때문이다.
function () {} 의 독립된 작용역this가 전역을 가리키기 때문에 (여기는 윈도우) 윈도우에 myFunc라는 함수가 없습니다. 잘못 보고되었습니다.
vue를 사용한 친구는 기본적으로, vue에는 모두this.XXX 이렇게 쓰세요.여기this는 Vue 객체입니다.
그래서this가 vue를 정확하게 가리키도록 ES6의 첨두 함수를 사용했습니다.
결국

setInterval(() => {
 this.myFunc()
},2000)
// 
myFunc () {
  console.log(123)
}

첨두 함수는 그 특수성 때문에 그것의this는 그 외층의 대상을 가리킨다.
사실 주로 두 번째 문제를 말하는데 첫 번째는 함수에 익숙하지 않은 것이고 두 번째는 VUE, ES6,this가 종합적인 문제를 가리킨다.
이상의 이 문제는 vue가 set Timeout을 사용하는 것을 해결하고 현재 루트에서 set Timeout을 삭제하지 않은 문제가 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.