• [微信小程序] 当动画(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的闭包函数,对于闭包函数不理解的一定要好好查查哦

     

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

     

  • 相关阅读:
    超级女声杭州赛区7进5
    究竟怎么了?
    最近发现
    S2SH基于角色权限拦截
    基于S2SH的电子商务网站系统性能优化
    TSQL复习笔记(一)
    用户sa登录失败,该用户与可信sql server连接无关联
    SQL附加数据库报5120的错误的解决办法
    DotNet中配置文件的使用(一)
    JQuery中使用AJAX $.ajax(prop)方法详解
  • 原文地址:https://www.cnblogs.com/piaobodewu/p/9338249.html
Copyright © 2020-2023  润新知