微信小程序api视频课程-定时器-setInterval+clearInterval的使用

忘是亡心i 2024-02-19 19:18 49阅读 0赞

### 页面效果图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

### wxml代码 ###

设置计时器（setInterval）、清除计时器（clearInterval）
    
    <button bindtap='mystart'>开始计数</button>
    
    <button bindtap='myend'>结束计数</button>

### js代码 ###

data: {
        //存储计数器
        setInter:'',
        num:0
      },
      mystart:function(options){
        var that=this;
        //将计时器赋值给setInter
        that.data.setInter=setInterval(
          function(){
            var numVal=that.data.num + 1;
            that.setData({ num: numVal});
            console.log("当前计数：" + that.data.num);
          },2000);
      },
      myend: function (options) {
        var that = this;
         //清除计时器  即清除setInter
        clearInterval(that.data.setInter)
      },

[欢迎大家收看我的视频教程：微信小程序常用API使用][API]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fae23dea7059403d9d55c97edab44026.png
[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[API]: https://ke.qq.com/course/383235?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/fb4d7b0ab7c94430be741202bab219ab.png