美文网首页
动画使用setInterval卡顿

动画使用setInterval卡顿

作者: 阳紫烨 | 来源:发表于2021-11-05 14:47 被阅读0次
信用分检测弹窗

          this.amountAni()

          this.firstItemAni()

          this.secondItemAni()

          this.thirdItemAni()

          this.fourItemAni()

        var timer = setInterval(_=>{

          if(this.data.numPer2>=this.data.datas.risk_score){

            this.setData({

              status2: !this.data.datas.self_high_risk?'ok':'alert'

            })

            clearInterval(timer)

          }else{

            this.setData({              

              status2:'flash',            

              numPer2: (+this.data.numPer2)+(process100) ,

              displayNum2: parseInt((+this.data.numPer2)+(process100))

            })

          } 

        },50)

页面上一共有4个进度条,所以使用了4个定时器,每个定时器的刷新是50ms,同时跑的时候最多有3个定时器,先前并没有什么问题,突然有一天就出现了卡顿,进度条断断续续,文字也是断断续续的。

最后解决办法就是动画不用定时器,减少定时器的使用。

当页面元素逻辑复杂的时候,定时器太多会影响性能,考验手机

相关文章

网友评论

      本文标题:动画使用setInterval卡顿

      本文链接:https://www.haomeiwen.com/subject/ghdrzltx.html