笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏，使用到setTimeout函数。遇到了1个坑:
 
在vue的某个方法(点击后执行)
setTimeout(this.end(),4000);//娃娃消失
 
这里奇怪的是,end方法的确被执行了。但是没有执行4s后执行的效果。那我要你合用呢！其实，问题还是出在笔者身上，大家请看下图
 
setTimeout的定义和用法。问题出在我的格式上面
 
 
其实是支持两种调用方式：1 字符 2 函数体（文章解决方式）
 
解决方法如下：
 
1、定义一个_this暂存this
 
2、再改变变量的值，则生效啦
 
3、方法中将this存在变量_this中，此时执行setTimeout函数时，setTimeout函数内的_this就会访问到这个变量，就会得到当前对象。
 
export default {

 methods: {

  start: function () {
  
   let _this=this
   setTimeout(function()  {

    _this.end()//娃娃消失

   }, 4000);

  }

 }

}
 

 注意⚠️:
 
 
当在vue中使用定时器在function里直接使用this，发现没有效果，这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象。拓展知识：解决vue在setTimeout内修改this失效的问题
 
要想setTimeout指向正确的值，可以使用如下方法：
 
1、使用箭头函数
 
export default {

 methods: {

  start: function () {

   setTimeout(() => {

    this.end()//娃娃消失

   }, 4000);

  }

 }

}
 

 此时函数的this指向的是定义它的时候的对象，也就是this指向了data内中对应的变量。
 
码字不易，对大家有用最佳

最近要加一个定时器，定时获取数据，使用setTimeout方法总是不生效，然后换成setInterval就可以了。
 
如下代码，换成setTimeout 没有效果，换成 setInterval就正常，到现在也不知道为啥不行
 
const _this = this
 
 setInterval(() => {
 
         _this.LoadStaStatus()
 
   }, 1000 * 60 * 5)

 

 
在异步清除中，利用vue 中data存放setTimeout的标识进行清除时，无法清除。则需要在函数前加上window.即可
 
如window.setTimeout与window.clearTimeout
 
具体代码如下
 
精简后的代码。
 
环境为electron-vue 渲染进程异步获取主进程上html并渲染到页面、过程中需要有loading的显示。
 
setTimeout 与clearTimeout 未加window时，this.timeOutLoading事件总会被触发。
 
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;
 
});
 
}
 
}

在开发项目中遇到这样的序曲，点击按钮弹框，每次进入的时候都需要默认选中Android，
 这个时候就遇到了一个小坑，当用户点击弹框后，选择iOS，再点击cancel或者OK，楼主在开发的时候，点击cancel按钮，执行下面代码
 
 this.showDialog = false; // 关闭弹框
 this.createForm.platform = "Android"; // 重置下拉框的默认选择项为Android
 this.createForm.secureCoreVersion = ""; // 清空输入框的东西
 
然后
 
 这几行代码在逻辑上看是正确的逻辑，但是实际页面上显示的样子，却不一样，点击cancel按钮的时候，弹框关闭，但是弹框会在关闭前的一刻，下拉框选中的iOS 会闪一下，变成Android，体验不是很好，
 于是，楼主想到了使用setTimeout来解决问题，遂写成如下代码
 
this.showDialog = false;
setTimeout(() => {
      this.createForm.platform = "Android";
      this.createForm.secureCoreVersion = "";
}, 500);
 
把 清空弹框里面表单的东西放在了定时器里面，这样就能避免在点击关闭按钮的时候，下拉框选项闪一下，变成默认选项Android的问题。
 
但是，过了1天，有个同事跑过来跟我说，楼主的写法存在一定的潜藏风险，那就是使用了setTimeout定时器来处理这个问题，
 
他的回答是：定时器一般只能用在写动画里面，日常的业务逻辑层代码尽量不要使用定时器，因为定时器虽然表面上能解决这个问题，但是，如果用户在设置的500毫秒以内再次点击cancel按钮，就会出现问题，定时器的原理实际上就是把js执行的这段代码拿到一个宏任务里面，最后执行
 
于是乎，p7水平的同事，跟我这样说，可以换一种思路，
 
可以在点击弹框弹出来的时候把弹框里面的选项都进行重置，不需要在关闭弹框的时候进行重置，其实是一个逆向思维的问题，在一开始点击弹框打开的时候直接重置参数，这样就能巧妙的绕过在关闭弹框出现的问题
通过elementUI dialog 组件自带的 closed 回调函数来解决问题
 
 
elementUI 的官网里面关于dialog弹框，封装了在关闭动画结束时执行的回调函数，直接在这个回调函数里面执行重置选项的逻辑就好了
 
上代码
 

 
 
最后小楼采用的是第二种方法来解决闪现的问题的
 
今天的日志心得就到这了~~~