收藏
回答

Canvas引起定时器不准的问题?

我用一个定时器time = setInterval(animation, animation_interval);绘图:

// 动画函数
				function animation() {
					console.log(`间隔时间:${Date.now()-that.startTime}`)
					if (step <= n) {
						end = end + 2 * Math.PI / n;
						ringMove(start, end);
						step++;
						
					} else {
						clearInterval(time);
					}
				};
				// 画布绘画函数
				function ringMove(s, e) {
					let stTime = Date.now();
					
					var context = wx.createCanvasContext('secondCanvas')


					var gradient = context.createLinearGradient(200, 100, 100, 200);
					gradient.addColorStop("0", "#2661DD");
					gradient.addColorStop("0.5", "#40ED94");
					gradient.addColorStop("1.0", "#5956CC");


					// 绘制圆环
					context.setStrokeStyle('#f6cbf4')
					context.beginPath()
					context.setLineWidth(10)
					context.arc(42, 42, 30, s, e, true)
					context.stroke()
					context.closePath()


					// 绘制倒计时文本
					context.beginPath()
					context.setLineWidth(1)
					context.setFontSize(30)
					context.setFillStyle('#ffffff')
					context.setTextAlign('center')
					context.setTextBaseline('middle')
					context.fillText(n - num + '', 42, 42, 30)
					context.fill()
					context.closePath()


					context.draw()


					// 每完成一次全程绘制就+1
					num++;
					
					console.log(`绘制时间:${Date.now()-stTime}`)
				}


var animation_interval = 500 //500毫秒

console输出:

绘制时间:76

canvasDemo.js:184 间隔时间:3307

canvasDemo.js:229 绘制时间:1

canvasDemo.js:184 间隔时间:4219

canvasDemo.js:229 绘制时间:2

canvasDemo.js:184 间隔时间:5212

canvasDemo.js:229 绘制时间:5

canvasDemo.js:184 间隔时间:6237

在真机调试时,虽然绘制时间很短,但定时器设置为500ms时,定时器定时间隔超出500毫秒,近1秒,微信集成环境下调试正常(定时器间隔500ms),啥情况??

最后一次编辑于  08-03
回答关注问题邀请回答
收藏

2 个回答

  • 李忠
    李忠
    08-04

    上面同样代码在小程序原生的程序中试了一下,结果在真机下,定时器完全不对:

    第三次启动定时器时,有两个间隔是100毫秒,但总的间隔是对的(每3个定时,1500ms),但前面两次启停定时器,间隔多是1秒。

    基础库版本信息:

    附代码:

    //wxml
        
          "onStart"> 启动定时器 
          "onStop"> 关闭定时器 
        
    
    //js
    onStart(){
        let time = setInterval(this.timerCallback, 500);
        let beginTime = Date.now();
        this.setData({
          time:time,
          beginTime:beginTime
        })
      },
      onStop(){
        clearInterval(this.data.time);
      },
      timerCallback(){
        console.log(`timerCallback:${Date.now()-this.data.beginTime}`)
      }
    
    08-04
    有用
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    08-04

    谢邀:

    目测clearInterval(time);执行了,重新清理了定时器
    


    08-04
    有用
    回复 3
    • 李忠
      李忠
      08-04
      只有 达到指定循环次数(n)以后,才会执行clearInterval(time)清除定时器!奇怪了,好像和canvas没有关系,我把ringMove去掉,真机上定时器间隔也是1秒,集成环境下正常


      App Launch
      weapp:///common/main.js:129 App Show
      canvasDemo.js:184 间隔时间:569
      canvasDemo.js:184 间隔时间:1561
      canvasDemo.js:184 间隔时间:2561
      canvasDemo.js:184 间隔时间:3561
      canvasDemo.js:184 间隔时间:4561
      canvasDemo.js:184 间隔时间:5565
      canvasDemo.js:184 间隔时间:6563
      canvasDemo.js:184 间隔时间:7563
      canvasDemo.js:184 间隔时间:8561
      canvasDemo.js:184 间隔时间:9561
      canvasDemo.js:184 间隔时间:1056
      08-04
      回复
    • Admin²⁰²⁰
      Admin²⁰²⁰
      08-04回复李忠
      是的,部分手机上这个定时器不准时,社区有朋友碰到过。
      但是,我不会想到这个问题会这么普遍?你基础库版本多少。去掉所有代码,就在定时器里执行console.log试试看
      08-04
      回复
    • 李忠
      李忠
      08-04回复Admin²⁰²⁰
      08-04
      回复
登录 后发表内容
问题标签