詳解微信小程序用定時器實現(xiàn)倒計時效果

更新時間：2019年04月30日 09:18:58 作者：Charles_Tian

這篇文章主要介紹了微信小程序用定時器實現(xiàn)倒計時效果，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

平常在微信小程序開發(fā)的時候，因項目的需求，倒計時必不可少，下面主要講解定時器在微信小程序中的使用。

這里要先聲明一點的就是，該篇主要實現(xiàn)倒計時功能，而且實現(xiàn)是時長較短的倒計時，其他的優(yōu)化什么的不作主要考慮。

如果實現(xiàn)簡單的60s倒計時效果，我們可直接使用setInterval即可，但是在微信小程序中，我們需要用微信小程序的語法，這時就會遇到一個難題，那就是怎么關(guān)閉定時器的問題，下面給出實例。

WXML代碼

<view class='countDown'>倒計時：<text style='color:red'>{{countDownNum}}</text>s</view>

JS代碼：

Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  timer: '',//定時器名字
  countDownNum: '60'//倒計時初始值
 },
 
 onShow: function(){
  //什么時候觸發(fā)倒計時，就在什么地方調(diào)用這個函數(shù)
  this.countDown();
 },
 
 countDown: function () {
  let that = this;
  let countDownNum = that.data.countDownNum;//獲取倒計時初始值
  //如果將定時器設置在外面，那么用戶就看不到countDownNum的數(shù)值動態(tài)變化，所以要把定時器存進data里面
  that.setData({
   timer: setInterval(function () {//這里把setInterval賦值給變量名為timer的變量
    //每隔一秒countDownNum就減一，實現(xiàn)同步
    countDownNum--;
    //然后把countDownNum存進data，好讓用戶知道時間在倒計著
    that.setData({
     countDownNum: countDownNum
    })
    //在倒計時還未到0時，這中間可以做其他的事情，按項目需求來
    if (countDownNum == 0) {
     //這里特別要注意，計時器是始終一直在走的，如果你的時間為0，那么就要關(guān)掉定時器！不然相當耗性能
     //因為timer是存在data里面的，所以在關(guān)掉時，也要在data里取出后再關(guān)閉
     clearInterval(that.data.timer);
     //關(guān)閉定時器之后，可作其他處理codes go here
    }
   }, 1000)
  })
 }
})

好了，這就是簡單的倒計時實現(xiàn)過程，大家可復制代碼到微信開發(fā)者工具去驗證效果。

以上所述是小編給大家介紹的微信小程序用定時器實現(xiàn)倒計時效果詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: