溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
平常在微信小程序開發的時候，因項目的需求，倒計時必不可少，下面主要講解定時器在微信小程序中的使用。
這里要先聲明一點的就是，該篇主要實現倒計時功能，而且實現是時長較短的倒計時，其他的優化什么的不作主要考慮。
如果實現簡單的60s倒計時效果，我們可直接使用setInterval即可，但是在微信小程序中，我們需要用微信小程序的語法，這時就會遇到一個難題，那就是怎么關閉定時器的問題，下面給出實例。
WXML代碼
<view class='countDown'>倒計時：<text style='color:red'>{{countDownNum}}</text>s</view>
JS代碼：
Page({
/**
* 頁面的初始數據
*/
data: {
timer: '',//定時器名字
countDownNum: '60'//倒計時初始值
},
onShow: function(){
//什么時候觸發倒計時，就在什么地方調用這個函數
this.countDown();
},
countDown: function () {
let that = this;
let countDownNum = that.data.countDownNum;//獲取倒計時初始值
//如果將定時器設置在外面，那么用戶就看不到countDownNum的數值動態變化，所以要把定時器存進data里面
that.setData({
timer: setInterval(function () {//這里把setInterval賦值給變量名為timer的變量
//每隔一秒countDownNum就減一，實現同步
countDownNum--;
//然后把countDownNum存進data，好讓用戶知道時間在倒計著
that.setData({
countDownNum: countDownNum
})
//在倒計時還未到0時，這中間可以做其他的事情，按項目需求來
if (countDownNum == 0) {
//這里特別要注意，計時器是始終一直在走的，如果你的時間為0，那么就要關掉定時器！不然相當耗性能
//因為timer是存在data里面的，所以在關掉時，也要在data里取出后再關閉
clearInterval(that.data.timer);
//關閉定時器之后，可作其他處理codes go here
}
}, 1000)
})
}
})
好了，這就是簡單的倒計時實現過程，大家可復制代碼到微信開發者工具去驗證效果。
以上所述是小編給大家介紹的微信小程序用定時器實現倒計時效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
