• [微信小程序] 当动画(animation)遇上延时执行函数(setTimeout)出现的问题


    小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错。本文先告诉解决方法,后分析报错原因

    1.解决方法:

    在 setTimeout() 函数的同级加上 const that = this;   ,然后将this.setData换成that.setData就好了
    贴上我的代码示例:
     1 getMsg:  function () {
     2     const that = this;
     3     // 动画内容
     4     this.animation.translate(-115, -140).step(),
     5     this.animation.translate(-100, -120).step(),
     6     this.setData({
     7     animation_bar_a: this.animation.export(),
     8     //定时器
     9     setTimeout(function () {
    10        that.setData({
    11           to_cover: 'none'
    12        })
    13     }, 1000)
    14 }

    2.分析报错原因

    1)先看一下animation动画生成步骤

    A.创建一个动画实例animation

    B.调用实例的方法来描述动画

    C.最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

    2)在getMsg()函数中如果不加const that = this;则到达setTimeout函数内,很多人以为呢(我刚解决后也是这样认为的),此时的this指代的是上个动画函数的匿名对象,用this当然就报错啦。

    其实不然,经过反复尝试后,我发现,这是一个this作用域指向问题 ,setTimeout函数实际是一个闭包 闭包 闭包, 无法直接通过this来setData。那么需要怎么修改呢?

    我们通过将当前对象赋给一个新的对象

     1 const that = this; 

    然后使用that 来setData就行了。

    理解的核心就是理解js的闭包函数,对于闭包函数不理解的一定要好好查查哦

     

    如果还有不懂的欢迎文章下评论哦,有问必答!

     

  • 相关阅读:
    vue-待办日历和Table
    vue-播种量小工具总结
    20200415-巡检发现的有趣事情
    vue-element-admin学习笔记--Setting保存到cookie
    vue-element-admin学习笔记--权限加载及自定义布局(8)
    vue-element-admin学习笔记--权限加载及自定义布局(7)
    vue-element-admin学习笔记--权限加载及自定义布局(6)
    第六天 二维数组 方法
    第五天(冒泡排序)
    第四天 数组(基础)
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/9338249.html
Copyright © 2020-2023  润新知