微信小程序使用 setInterval 制作计时器后台延迟问题

最新推荐文章于 2026-05-22 06:06:14 发布

原创

最新推荐文章于 2026-05-22 06:06:14 发布 · 2.1k 阅读

标签

#小程序 #javascript

本文探讨了微信小程序使用`setInterval`创建计时器时遇到的后台延迟问题。作者在开发校园足球裁判工具时发现，当小程序切到后台时，计时存在延迟。通过分析小程序生命周期，作者推测延迟可能源于`onHide`和`onShow`函数调用间的数据同步时间。解决方案包括保持页面在前台或利用时间戳调整后台时间显示。

微信小程序使用 `setInterval` 制作计时器后台延迟问题

之前参加2020年微信小程序应用开发大赛的时候写了一个用于校园足球的微信小程序——踢在浙大。

在小程序的设计过程中出现了一个裁判工具的功能，简单地说就是裁判在比赛过程中使用裁判工具中秒表的功能，来记录在第几分钟发生了什么事情。举个例子，如下图就是比赛过程中记录的比赛事件。
在这里插入图片描述
因为当时刚开始学习JavaScript，所以实际上有很多的内容一知半解甚至根本不懂但就要开始实现这样一个任务。在网上搜集了大量的资料之后最终终于发现可以使用 setInterval 来实现我所需的功能。setInterval与setTimeout的使用差别不大，参数都是一样的。区别就在于setTimeout是到时执行一次，setInterval是根据设置的时间来回调的，比如每秒回调一次。

首先对开启计时的功能进行编写，开始计时就是将各个初始值归零并进行 setInterval的初始化设置。

  // 比赛开始，设置计时开始
  begin: function () {
   
   
    var that = this
    var app = getApp()
    clearInterval(intt); // 设置停止（暂停），时间重置，从00:00开始
    that.setData({
   
   
      minute: this.data.minute,
      second: this.data.second,
      millisecond: this.data.millisecond,
      timecount: this.data.minute + ':' + this.data.second,
    })
    intt = setInterval(function () {
   
    that.timer() }, 50); // 每 50 ms回调一次