精华内容
下载资源
问答
  • 主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
  • 主要介绍了VUEsetTimeout和setInterval自动销毁案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 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内中对应的变量。

    码字不易,对大家有用最佳

    展开全文
  • 主要介绍了解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近要加一个定时器,定时获取数据,使用setTimeout方法总是不生效,然后换成setInterval就可以了。 如下代码,换成setTimeout 没有效果,换成setInterval就正常,到现在也不知道为啥不行 const_this=this ...

    最近要加一个定时器,定时获取数据,使用setTimeout方法总是不生效,然后换成setInterval就可以了。

    如下代码,换成setTimeout 没有效果,换成 setInterval就正常,到现在也不知道为啥不行

    const _this = this

     setInterval(() => {

             _this.LoadStaStatus()

       }, 1000 * 60 * 5)

    展开全文
  • 在异步清除中,利用vue 中data存放setTimeout的标识进行清除时,无法清除。则需要在函数前加上window.即可如window.setTimeout与window.clearTimeout具体代码如下精简后的代码。环境为electron-vue 渲染进程异步获取...

    f1dd291eff26a3eeb2efe4e0acddf1a1.png

    在异步清除中,利用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;

    });

    }

    }

    展开全文
  • 但是,过了1天,有个同事跑过来跟我说,楼主的写法存在一定的潜藏风险,那就是使用了setTimeout定时器来处理这个问题, 他的回答是:定时器一般只能用在写动画里面,日常的业务逻辑层代码尽量不要使用定时器,因为...

    在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中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水平的同事,跟我这样说,可以换一种思路,

    1. 可以在点击弹框弹出来的时候把弹框里面的选项都进行重置,不需要在关闭弹框的时候进行重置,其实是一个逆向思维的问题,在一开始点击弹框打开的时候直接重置参数,这样就能巧妙的绕过在关闭弹框出现的问题
    2. 通过elementUI dialog 组件自带的 closed 回调函数来解决问题
      在这里插入图片描述

    elementUI 的官网里面关于dialog弹框,封装了在关闭动画结束时执行的回调函数,直接在这个回调函数里面执行重置选项的逻辑就好了

    上代码

    在这里插入图片描述
    在这里插入图片描述

    最后小楼采用的是第二种方法来解决闪现的问题的

    今天的日志心得就到这了~~~

    展开全文
  • 在做项目的时候,setTimeout(),setTimeout(fuction(){},1000),不生效。找了一圈某度也没找到合适的方法,就自己写了一个。 setTimeout(function(){ this.$router.go(-1); },500); 函数是执行了,但是0.5秒后没有...
  • vue 防抖 setTimeout 失效

    2019-07-24 18:02:22
    vue中,写防抖的时候,一定要检查一下是否有如下行: import { setTimeout } from "timers" // 删除掉此行 以下为防抖函数代码: // 数据行变化时 onFileSelection (row) { if (this.isTimerWorking !== null) {...
  • 解决方法如下: 1、定义一个self暂存this ...拓展知识:解决vuesetTimeout内修改this失效的问题 当在vue中使用定时器来修改一个变量值的时候,发现没有效果,这是由于setTimeout函数调用的代码运行在与所
  • 不调用方法 setTimeout(function () { console.log('谢谢') }, 3000) 调用方法 setTimeout(this.startProgress(), 5000)
  • 大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroyed,可以判断出是否还在当前生命周期中,true为不在,...
  • 先看效果图,这是弹窗效果,要求就是弹窗出现...问题就来了,在打开弹窗代码中,如下图,settimeout第二个参数小于60ms效果就会不稳定,有时候有过渡效果,有时候没有过渡效果。 // openbtn(){ // let _this=this; //
  • 显然,这个可以用setTimeout以及回调中继续setTimeout来实现。 我们假设定时器是在页面#/test/aaa上创建的。 但是,会遇到以下两个问题,我从#/test/aaa 这个页面切换到 #/test/bbb页面后如果停留在#/test/bbb,...
  • vue setTimeout--延迟操作

    2018-09-13 09:19:00
    有时候我们在查询后要做某些事情,例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候,我们可以对...setTimeout(() =>{ 要延迟的代码 },延迟时间); 转载于:https://www.cnblogs.com/xil...
  • 如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时,也会出现重复创建setTimeout的情况。 原因:当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除...
  • 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。 2.按照最原始的倒计时效果,实现如下:...
  • 1、在vue里面使用setTimeout发现this失效 原因是setTimeout的this指向的windows 解决:setTimeout的第一个参数的function用箭头函数来代替,原因文章开头已解释了箭头函数的作用 2、vue的方法想要同时传入...
  • 解决Vue方法中setTimeout改变变量的值无效
  • 问题:页面在使用 setTimeout 定时循环某方法,或者在两个页面之间跳转时间小于定时器的时间间隔时,定时器还在运行。 原因:当我们刷新页面时,会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅...
  • 1.问题: 将data属性的值在setTimeout中修改了,但是页面上面没有渲染...this指向问题 ,正常情况下this指向的是vue实例,而在setTimeout中this指向的是window 3.解决办法: 改变setTimeout中的this指向即可 ...
  • 当在vue中使用定时器来修改一个变量值的时候,发现没有效果,这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上,这会使得this指向的是window对象。 要想setTimeout指向正确的值,可以使用...
  • 问题2:vue的视图更新原理是通过重写数据对象的set方法来实现的, this.obj.pro="clicked" 触发的是pro属性的setter,而obj在data中定义时没有pro属性,pro的set并没有被重写,因此视图不会更新,解决方法就是想办法...
  • a.vue 文件中触发setTimeout后,使用按钮跳转至其他页面,快速返回至a.vue页面后 发现定时器仍然在走。 例子:a.vue代码 window.setTimeout(function(){  window.location.href = "/serverMonitor?t="+ new ...
  • 问题:setTimeout 函数内部效果 在Vue 事件中 没有执行 1、定义一个 that 暂存 this 2、再改变变量的值,就会生效 var that = this; setTimeout(function () { that.modPassword = true; }, 3000) ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,622
精华内容 17,448
关键字:

settimeoutvue

vue 订阅