Vue.js가 컴포넌트 내에서 실행 중인 setInterval을 삭제합니다.

Vue.js가 컴포넌트 내에서 실행 중인 setInterval을 삭제합니다.

VUE를 사용한SPA에는 setInterval 함수를 재귀적으로 실행하는 컴포넌트가 있습니다(카운트다운).뷰를 다른 컴포넌트로 전환했을 때 백그라운드에서 카운트다운이 계속되고 있는 것을 알 수 있었지만, setInterval을 파기하고 싶습니다.

카운트다운이 있는 글로벌 데이터를 사용하여 파괴된 훅으로 파괴하려고 했지만 작동하지 않습니다.

내 코드는 다음과 같습니다.

    data: function () {
        return {
            counters: ""
        }
    }),

   methods: {
     countdown(index, exp) {
        ...
          this.counters = setInterva()
        ...
        },
   },

   destroyed(){
        console.log(this.counters); // returns a progressive integer
        clearInterval(this.counters);
        console.log(this.counters); // returns same integer
        this.counters = 0;
        console.log("destroyed");
    } 

콘솔에는 다음과 같은 정보가 있습니다.

파괴된

app.disc:64433 0

app.js:64398 counter_1이 없습니다.<--- 카운터가 아직 실행 중임을 의미합니다.

제안해 주셔서 감사합니다!

여기서 전화하는지에 따라 두 가지 일이 발생할 수 있습니다.countdown또는 그렇지 않은 경우:

1. countdown라고 불리지 않는다.

countdown(index, exp)에서 정의할 필요가 있습니다.created아래와 같은 후크또한, 방법foo()는, 필요한 기능을 위해서 이 간격에 바인드 할 필요가 있습니다.

  created: function(){
      this.counterInterval =  setInterval(
        function()
        {
          this.foo();
        }.bind(this), 500);
    return this.foo();
  },
  destoyed: function(){
    clearInterval( this.counterInterval )
  },

2. countdown올바르게 호출되었지만 컴포넌트는 실제로 파괴되지 않았습니다.

컴포넌트가 파괴되지 않도록 컴포넌트를 "파괴"하는 것이 무엇을 의미하는지에 대한 오류일 경우 위와 같은 코드를 사용할 수 있지만,data을 지지하다.isShowing: trueJSX 내에서 경계가 있는 경우 문제가 해결됩니다.

v-if 확인만 하면 됩니다.isShowing요소가 뷰 내에 있는 경우 이벤트청취자를 실행합니다.요소가 시야에 들어오면isShowing===true그렇지 않으면 거짓입니다.

를 사용해 주세요.beforeDestroy대신 후크하다destroyed

vue 라이프 사이클에 대한 자세한 내용은 https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram를 참조하십시오.

vue3 destroy() 및 beforeDestroy()는 폐지되었습니다.

대신 unmount() 또는 before Unmount()를 사용합니다.

beforeUnmount(){
    clearInterval(this.counters);
}

Change destroy() 메서드를 beforeDestroy()로 변경해 보겠습니다.

갱신하다

vue 컴포넌트가 파괴되지 않았을 수도 있습니다.수동으로 파괴를 시도하다

영어가 서툴러서 미안해

루트 컴포넌트 내에서 루트네비게이션가드를 탈퇴하기 전에 setInterval을 파기합니다.클리어 추가Route Leave 전 내부 인터벌 함수. 컴포넌트를 떠나기 전에 setInterval에 의해 설정된 타이머가 파괴됩니다.

beforeRouteLeave (to, from, next) {
    clearInterval(this.counters);
    next()
},

언급URL : https://stackoverflow.com/questions/57621759/vue-js-destroy-a-setinterval-running-inside-a-component