微信小程序setInterval定时函数新手使用的超详细教程

 更新时间:2022年08月03日 09:19:00   作者:1029179954  
平时开发中为实现倒计时效果可以使用setInterval即可,下面这篇文章主要给大家介绍了关于微信小程序setInterval定时函数新手使用的超详细教程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1、setInterval的理解

(1)setInterval理解

setInterval定时函数,就是延迟多长时间不停的调用 setInterval中的函数,想具体了解 setInterval函数,我们先看一下 setInterval函数组成部分。

(2)setInterval组成

setInterval(function () {},时间)。function () {}就是不停执行函数,时间就是延迟多久不断地执行,重点function () {}函数

具体示例:

 setInterval(function () {
                 //.toClock1()是具体函数,写在外边
                 _this.toClock1();}, 6000);

(3)setInterval需要关闭

使用clearInterval()去关闭,具体使用看下面的内容

clearInterval()

2、setInterval放在微信小程序onshow函数里

onShow:页面显示或从后台跳回小程序时显示此页面时触发,从跳转页面返回时触发,不能传递参数

3、setInterval具体使用

(1)设置全局变量timer(timer随便起)

//在微信小程序data中写如下代码,timer全局变量
 data: {
    timer: null,
  },

(2)onshow写setInterval函数

onShow: function () {
      const _this = this
       //定时器  函数赋值给timer  方便clearInterval()使用
       _this.data.timer = setInterval(
         function () {
        _this.toClock1();        
        }, 6000);

        _this.setData({
          timer:_this.data.timer
        });
  },

toClock1()函数

//定时函数执行的内容  自己发挥   写自己的代码
toClock1(){
    console.log(this.data.timer)
}

4、离开当前页面关闭 setInterval定时函数

代码放在onhide里边

onHide: function () {
//关闭clearInterval定时函数
    clearInterval(this.data.timer);
    this.setData({
      timer: null
    });
    console.log(this.data.timer)
  },

附:微信小程序定时器setInterval()的使用注意事项

setInterval(function(){}, number 时间间隔/ms)

注意在setInterval中定义的函数中使用  this  指向的是该计时器,若要用到页面数据应如下操作:

let that=this
setInterval(function(){
   that.data.a=0;
},number 时间间隔/ms)

通过在setInterval外面设置一个变量 that 获得 页面 this 的引用,后进行操作

总结

到此这篇关于微信小程序setInterval定时函数使用的文章就介绍到这了,更多相关微信小程序setInterval定时函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解js前端代码异常监控

    详解js前端代码异常监控

    本文主要介绍了js代码异常监控的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序点击顶部导航栏切换样式代码实例

    微信小程序点击顶部导航栏切换样式代码实例

    这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-11-11
  • JS原型与继承操作示例

    JS原型与继承操作示例

    这篇文章主要介绍了JS原型与继承操作,涉及javascript面向对象程序设计中原形与继承的相关定义、实例化操作技巧,需要的朋友可以参考下
    2019-05-05
  • 在bootstrap中实现轮播图实例代码

    在bootstrap中实现轮播图实例代码

    Bootstrap中轮播图插件叫作Carousel ,下面通过本文给大家详细介绍了bootstrop中实现轮播图效果,需要的朋友参考下
    2017-06-06
  • JS实现很酷的EMAIL地址添加功能实例

    JS实现很酷的EMAIL地址添加功能实例

    这篇文章主要介绍了JS实现很酷的EMAIL地址添加功能,实例分析了javascript操作text文本的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • JS进阶指南之你真的掌握变量和类型了吗

    JS进阶指南之你真的掌握变量和类型了吗

    变量是存储信息的容器(JS的变量名是区分大小写的),下面这篇文章主要给大家介绍了关于JS进阶指南之变量和类型的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 微信小程序开发实战快速入门教程

    微信小程序开发实战快速入门教程

    这篇文章主要为大家介绍了开发一个微信小程序实战快速入门教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • JavaScript学习笔记之DOM基础操作实例小结

    JavaScript学习笔记之DOM基础操作实例小结

    这篇文章主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
    2019-01-01
  • JS实现灯泡开关特效

    JS实现灯泡开关特效

    这篇文章主要为大家详细介绍了JS实现灯泡开关特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Ionic学习日记实现验证码倒计时

    Ionic学习日记实现验证码倒计时

    本篇文章主要介绍了Ionic学习日记实现验证码倒计时,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论