笔者最近因为公司需求开发使用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 函数内部效果 在Vue 事件中 没有执行

1、定义一个 that 暂存 this

2、再改变变量的值，就会生效
 var that = this;
 setTimeout(function () {
    that.modPassword = true;
 }, 3000)

vue在切换页面时，销毁了上衣个组件，上一个页面的也要相应的setTimeout 注销：

1 setTimeout(function () {
2   if(that && !that._isDestroyed){//_isDestroyed 组件是否被销毁
3      that.getData(that.tableData.page.curr);
4   }
5 }, 3000);

 




 setTimeout   详细X



网络释义
setTimeout: 在指定时间后调用函数或计算表达式
Javascript setTimeout: 定时器以及参数设置
      
   
  

转载于:https://www.cnblogs.com/mxyr/p/9406804.html

1.前言

相信很多人都遇到过这样的问题，页面数据需要不断的刷新，也就是不断的发送ajax请求来更新数据，那么在vue中怎样做才比较好呢？这里介绍一下我踩的坑，以及解决方案

2.问题

settimeout用来调用请求数据，但是我遇到的问题就是，没有用合适的方式去关闭settimeout,出现了离开当前页面，请求还在不断的发送问题，这样给服务器带来了无必要的压力。附上之前的代码：

    self.deployTimeOutId = setTimeout(() => {
                            self.getDeployList(false);
                        }, 5000);

说明：这一段代码是嵌在getDeployList方法中的，离开当前页面的是时候，必须要去手动的把这个settimeout清除才行。一般这个写在destoryed()这个钩子里。

window.clearTimeout(this.deployTimeOutId);

虽然这样处理了，但在逻辑比较复杂的情况下，还是出现了没有关闭的情况，而且排查起来很痛苦。下面介绍一种针对Vue比较好的做法。

3.解决方案



    let self=this;
    if (self && !self._isDestroyed) {
                        setTimeout(() => {
                            if (self && !self._isDestroyed)
                                self.getDeployList();
                        }, 5000);
                    }

_isDestroyed这个属性表示的是当前这个组件是否有被销毁，true表示当前的组件已经被销毁，通过上面这个判断，我们就不需要自己手动的去用ID来清除了，这个就相当于递归嘛，有了一个结束判断，避免了死循环咯~~