美文网首页
动画使用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