js vue中setTimeout无法通过clearTimeout清除问题

js vue中setTimeout无法通过clearTimeout清除问题

• 在异步清除中，利用vue 中data存放setTimeout的标识进行清除时，无法清除。则需要在函数前加上window.即可
• 如window.setTimeout与window.clearTimeout

具体代码如下

• 精简后的代码。
• 环境为electron-vue 渲染进程异步获取主进程上html并渲染到页面、过程中需要有loading的显示。
• setTimeout 与clearTimeout 未加window时，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 = "
加载中...
";
            this.loading = true;
            this.timeOutLoading = window.setTimeout(() => {
                if(this.loading == true){
                    this.loading = false;
                    this.html = "
加载超时
";
                }  
            }, 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>