微信小程序中,JS中setInterval()和clearInterval()的使用以及注意事项

本文介绍了在微信小程序中如何使用JS的setInterval()来每秒更新当前时间,并通过clearInterval()来停止更新。强调了clearInterval()需要传入setInterval返回的ID值,并提醒开发者在使用时注意保存定时器ID为全局变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

显示当前时间 ( setInterval() 函数会每秒执行一次函数,类似手表)。使用clearInterval() 来停止执行:
  1. clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
  2. clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
  • 注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量:
以下是在微信小程序的一个interval.js页面展示的setInterval()clearInterval()方法的demo:
./interval.js

let interval = null;

Page({

  /**
   * 页面的初始数据
   */
  data: {
    countDown: 60,
    timeMsg: '重新开始', //倒计时 
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    // 页面启动时,调用定时器所在的函数
	this.setCountdown();
  }


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
	// 页面关闭时,清空定时器函数
    clearInterval(interval);
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
	// 页面关闭时,清空定时器函数
    clearInterval(interval);
  },


  // 设置每秒一次。
  setCountdown: function () {
    //因为interval函数中的this域不一样了,需要把页面的this提取出来
    var _this = this;  
    var countDown = _this.data.countDown;
    interval = setInterval(function () {
      countDown--;
      _this.setData({
        timeMsg: '剩下 ' + countDown + ' 秒'
      })
      if (countDown <= 0) {
        // 当倒计时处于复数时,我们就停止倒计时函数
        clearInterval(interval);
        _this.setData({
          timeMsg: '重新开始',
          countDown: 60
        })
      }
    }, 1000)
  },

})


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值