js의 setInterval 타이머 비우기 문제 해결

사용 장면: 함수 A에서 타이머 함수를 호출합니다. 타이머는 단독으로 쓴 함수입니다.
원인: 페이지를 불러올 때 함수 A를 한 번 호출한 다음에 타이머 함수를 단독으로 호출해서 setInterval()을 두 번 호출해서 setInterval_id는 두 개의 값이 있습니다.
타이머의 값을 인쇄하여 발견한 문제입니다.
clearInterval() 중 하나만 닫혔습니다.setInterval_id, 또 다른 setInterval_id는 setInterval()도 시작합니다.
해결 방법: 단독으로 호출된 타이머 함수를 제거합니다.
추가 지식: js vue에서 setTimeout에서 clearTimeout을 통해 문제를 제거할 수 없음
비동기적 지우기에서 vue의 데이터에 setTimeout의 표지를 저장하여 지우면 지울 수 없습니다.함수 앞에 윈도우를 추가해야 합니다.... 하면 된다
윈도우처럼.setTimeout 및 window.clearTimeout
구체적인 코드는 다음과 같다.
간소화된 코드.
환경은 electron-vue 렌더링 프로세스로 주 프로세스의 html를 비동기적으로 가져와 페이지로 렌더링합니다. 이 과정에서 로딩이 필요합니다.
setTimeout과clearTimeout이 윈도우를 추가하지 않았을 때,this.timeOutLoading 이벤트는 항상 촉발됩니다.

<template>
<div id="dev">
    <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="loading">
    <el-tab-pane label=" " name="first">
      <div v-html="html"></div>
    </el-tab-pane>
     <el-tab-pane label=" " name="second">
      <v-devCard></v-devCard>
    </el-tab-pane>
    </el-tabs>
</div>
</template>

<script>
  const {ipcRenderer:ipc} = require('electron');

export default {

  data(){
    return{
      activeName: 'second',
      html:'',
      loading:false,
      timeOutLoading:0
    }
  },
  methods:{
    handleClick(tab, event) {
    if(tab.name == 'first' && this.loading == false){
      if(this.timeOutLoading != 0){
        window.clearTimeout(this.timeOutLoading);
      }

      this.html = "<div style='text-align:center; height:200px; line-height:200px;'> ...</div>";
      this.loading = true;
      this.timeOutLoading = window.setTimeout(() => {
        if(this.loading == true){
          this.loading = false;
          this.html = "<div style='text-align:center; height:200px; line-height:200px;'> </div>";
        } 
      }, 3000);

      window.setTimeout(() => {
        ipc.send("getPage");
      }, 500);
       
    }
   }
  },
  mounted(){
    ipc.on('getPage-reply', (event, arg) => {
        if(this.timeOutLoading != 0){
          window.clearTimeout(this.timeOutLoading);
          this.timeOutLoading = 0;
        }      
        this.loading = false;
        this.html = arg; 
      });
  }
}
</script>

이상에서 js의 set Interval 타이머 비우기 문제를 해결한 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.