精华内容
下载资源
问答
  • setTimeoutvue中的正确使用

    万次阅读 多人点赞 2018-10-25 10:23:22
    笔者最近因为公司需求开发使用vue和jquery开发抓娃娃H5极简小游戏,使用到setTimeout函数。遇到了1个坑: 在vue的某个方法(点击后执行) setTimeout(this.end(),4000);//娃娃消失 这里奇怪的是,end方法的确被执行了...

    笔者最近因为公司需求开发使用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) ...

    问题:setTimeout 函数内部效果 在Vue 事件中 没有执行
    1、定义一个 that 暂存 this
    2、再改变变量的值,就会生效

     var that = this;
     setTimeout(function () {
        that.modPassword = true;
     }, 3000)
    
    展开全文
  • vue setTimeout 注销

    2018-08-02 14:04:00
    vue在切换页面时,销毁了上衣个组件,上一个页面的也要相应的setTimeout 注销: 1 setTimeout(function () { 2 if(that && !that._isDestroyed){//_isDestroyed 组件是否被销毁 3 that.getData(that....

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

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

     

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

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

    展开全文
  • VueSetTimeout

    万次阅读 2017-01-16 23:01:41
    1.前言 相信很多人都遇到过这样的问题,页面数据需要不断的刷新,也就是不断的发送ajax请求来更新数据,那么在vue中怎样做才比较好呢?这里介绍一下我踩的坑,以及解决方案 2.问题 settimeout用来调用请求数据,但是...

    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来清除了,这个就相当于递归嘛,有了一个结束判断,避免了死循环咯~~

    展开全文
  • Vue中使用setTimeout

    2019-09-02 17:11:29
    VuesetTimeout 调用方法.
  • vue setTimeout失效

    千次阅读 2018-01-06 15:41:18
    let that=this; this.hie=true; this.erro=res.data.msg; setTimeout(function () { that.hie=false; },3000)
  • 问题2:vue的视图更新原理是通过重写数据对象的set方法来实现的, this.obj.pro="clicked" 触发的是pro属性的setter,而obj在data中定义时没有pro属性,pro的set并没有被重写,因此视图不会更新,解决方法就是想办法...
  • vue中使用setTimeout

    2017-06-05 11:33:00
    vue的函数中使用setTimeout self.distroyTimeout = setTimeout(()=>{  self.initData() },1000) 这时清除setTimeout需要在destoryed周期中进行 destoryed(){  window.clearTimeout(this....
  • vue 防抖 setTimeout 失效

    2019-07-24 18:02:22
    vue中,写防抖的时候,一定要检查一下是否有如下行: import { setTimeout } from "timers" // 删除掉此行 以下为防抖函数代码: // 数据行变化时 onFileSelection (row) { if (this.isTimerWorking !== null) {...
  • Vue延时函数setTimeout

    千次阅读 2020-05-08 14:58:54
    单位是毫秒 setTimeout(() => { //代码 }, 1000);
  • 主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue的大型单页应用中,在某个路由下,经常会出现需要延迟执行(setTimeout)或者间隔之心(setInterval)的函数,但是每次在页面destroy之前,都必须手动清理掉。 正常代码如下: beforeDestroy() { this._timer ...
  • vue中使用定时器setTimeout

    千次阅读 2019-04-29 17:14:05
    今天有一个需求就是页面需要几秒中调一次请求,自然用setTimeout,然后就发现有一个Bug,明明设置的是5秒,可是页面却一直刷新,根本不是5秒,后来感觉是因为没有清除定时器,修改之后,发现是这样的,应该在VUE销毁...
  • vuesetTimeout和setInterval下的console和alert可以执行但是和this有关的不能执行 console两个this的结果(按顺序) 可以看出两个this的指向不同,因为setTimeout和setInterval这两个函数是window对象的...
  • 要达到的效果,注销组建 或者页面跳转 关掉计时器 第一 1、data里定义一个变量 data() { return { setTimeOutObj:null, } }, 2、mounted(){}里 var a=1; m.setTimeOutObj=setInterval(()=>... ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,236
精华内容 494
关键字:

settimeoutvue

vue 订阅