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