微信小程序setInterval定時(shí)函數(shù)新手使用的超詳細(xì)教程
1、setInterval的理解
(1)setInterval理解
setInterval定時(shí)函數(shù),就是延遲多長(zhǎng)時(shí)間不停的調(diào)用 setInterval中的函數(shù),想具體了解 setInterval函數(shù),我們先看一下 setInterval函數(shù)組成部分。
(2)setInterval組成
setInterval(function () {},時(shí)間)。function () {}就是不停執(zhí)行函數(shù),時(shí)間就是延遲多久不斷地執(zhí)行,重點(diǎn)function () {}函數(shù)
具體示例:
setInterval(function () { //.toClock1()是具體函數(shù),寫(xiě)在外邊 _this.toClock1();}, 6000);
(3)setInterval需要關(guān)閉
使用clearInterval()去關(guān)閉,具體使用看下面的內(nèi)容
clearInterval()
2、setInterval放在微信小程序onshow函數(shù)里
onShow:頁(yè)面顯示或從后臺(tái)跳回小程序時(shí)顯示此頁(yè)面時(shí)觸發(fā),從跳轉(zhuǎn)頁(yè)面返回時(shí)觸發(fā),不能傳遞參數(shù)
3、setInterval具體使用
(1)設(shè)置全局變量timer(timer隨便起)
//在微信小程序data中寫(xiě)如下代碼,timer全局變量 data: { timer: null, },
(2)onshow寫(xiě)setInterval函數(shù)
onShow: function () { ? ? ? const _this = this ? ? ? ?//定時(shí)器 ?函數(shù)賦值給timer ?方便clearInterval()使用 ? ? ? ?_this.data.timer = setInterval( ? ? ? ? ?function () { ? ? ? ? _this.toClock1(); ? ? ? ? ? ? ? ? }, 6000); ?? ? ? ?_this.setData({ ?? ? ? ? ?timer:_this.data.timer ?? ? ? ?}); ? },
toClock1()函數(shù)
//定時(shí)函數(shù)執(zhí)行的內(nèi)容 自己發(fā)揮 寫(xiě)自己的代碼 toClock1(){ console.log(this.data.timer) }
4、離開(kāi)當(dāng)前頁(yè)面關(guān)閉 setInterval定時(shí)函數(shù)
代碼放在onhide里邊
onHide: function () { //關(guān)閉clearInterval定時(shí)函數(shù) clearInterval(this.data.timer); this.setData({ timer: null }); console.log(this.data.timer) },
附:微信小程序定時(shí)器setInterval()的使用注意事項(xiàng)
setInterval(function(){}, number 時(shí)間間隔/ms)
注意在setInterval中定義的函數(shù)中使用 this 指向的是該計(jì)時(shí)器,若要用到頁(yè)面數(shù)據(jù)應(yīng)如下操作:
let that=this setInterval(function(){ ? ?that.data.a=0; },number 時(shí)間間隔/ms)
通過(guò)在setInterval外面設(shè)置一個(gè)變量 that 獲得 頁(yè)面 this 的引用,后進(jìn)行操作
總結(jié)
到此這篇關(guān)于微信小程序setInterval定時(shí)函數(shù)使用的文章就介紹到這了,更多相關(guān)微信小程序setInterval定時(shí)函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例
這篇文章主要介紹了微信小程序點(diǎn)擊頂部導(dǎo)航欄切換樣式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11在bootstrap中實(shí)現(xiàn)輪播圖實(shí)例代碼
Bootstrap中輪播圖插件叫作Carousel ,下面通過(guò)本文給大家詳細(xì)介紹了bootstrop中實(shí)現(xiàn)輪播圖效果,需要的朋友參考下2017-06-06JS實(shí)現(xiàn)很酷的EMAIL地址添加功能實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的EMAIL地址添加功能,實(shí)例分析了javascript操作text文本的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02微信小程序開(kāi)發(fā)實(shí)戰(zhàn)快速入門(mén)教程
這篇文章主要為大家介紹了開(kāi)發(fā)一個(gè)微信小程序?qū)崙?zhàn)快速入門(mén)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作實(shí)例小結(jié)
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ)操作,結(jié)合實(shí)例形式總結(jié)分析了javascript針對(duì)dom元素節(jié)點(diǎn)、屬性的相關(guān)獲取、設(shè)置等操作技巧,需要的朋友可以參考下2019-01-01JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)燈泡開(kāi)關(guān)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)
本篇文章主要介紹了Ionic學(xué)習(xí)日記實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02