最近業(yè)務(wù)上有個需求就是一個車輛管理列表驾窟，可以實現(xiàn)對每一輛車實現(xiàn)刷新舆床，刷新的目的在于更新刷新時間，讓車輛在首頁展示時按刷新時間倒序排列店读。所以為了增強(qiáng)用戶體驗嗦枢，得顯示每輛車的刷新倒計時。話不多說屯断，看初期UI設(shè)計的圖
實現(xiàn)過程并不難文虏，難就難在返回上一頁進(jìn)來后顯示倒計時的文字就沒有了。后面解決的辦法時將點(diǎn)擊刷新按鈕的當(dāng)前時間存入緩存中殖演，在重新進(jìn)入頁面時先判斷緩存中是否存在此時間氧秘。如下圖
當(dāng)這個問題也解決了，就發(fā)現(xiàn)一個很坑的問題趴久，每次上拉刷新或者重新進(jìn)入頁面后丸相，有時候會倒計時結(jié)束后又重新倒計時。重新檢查了好幾遍彼棍，沒發(fā)現(xiàn)邏輯有錯誤灭忠。定時結(jié)束后也清除了定時器，效果是下面這樣子的：
當(dāng)方框內(nèi)倒計時文字結(jié)束到00.00時候座硕。會重新倒計時弛作，而不是我想要的隱藏倒計時文字同時刷新按鈕變成綠色可用。
后面解決方案是將定時器的id也存入緩存中华匾，每次執(zhí)行一個新的定時器映琳，就判斷緩存中是否存在此id的定時器，如下圖
以下是倒計時的主要代碼
interval(index) {//倒計時
? ? var that = this
? ? //先判斷緩存中是否存在此定時器，如果存在則清除此定時器萨西。
? ? //（目的在于當(dāng)重新進(jìn)入頁面時或者上拉刷新時候有鹿，需要重新從后臺加載數(shù)據(jù)，這時候在數(shù)據(jù)加載過程中會會判斷緩存中是否存在車輛的刷新時間數(shù)據(jù)谎脯，如果存在葱跋，則調(diào)用此倒計時方法，而這時候調(diào)用則會出現(xiàn)倒計時結(jié)束后會重新倒計時穿肄，因為這時候的倒計時已經(jīng)不是原來那個倒計時方法了年局。說的可能有點(diǎn)懵逼，咸产，把如下4行去掉測試，你們就明白）
? ? var interval_id = wx.getStorageSync('interval'+index)
? ? if (interval_id){
? ? ? clearInterval(interval_id)
? ? }
? ? var interval = setInterval(function () {
? ? ? //將每個定時器的id存入緩存,這么做也是沒辦法
? ? ? wx.setStorageSync('interval' + index, interval)
? ? ? let insertTime = 'insertTime[' + index + ']'
? ? ? var disabled = 'disabled[' + index + ']'
? ? ? //從緩存中讀取是否有倒計時數(shù)據(jù)
? ? ? var countDownTime = wx.getStorageSync(insertTime);//時間戳格式
? ? ? if (countDownTime){
? ? ? ? var nowTime = Date.parse(new Date());//當(dāng)前時間戳
? ? ? ? var differ_time = countDownTime - nowTime;//時間差：(10分鐘)
? ? ? ? if (differ_time > 0) {
? ? ? ? ? var differ_minute = Math.floor(differ_time % (3600 * 1e3) / (1000 * 60));
? ? ? ? ? var s = Math.floor(differ_time % (3600 * 1e3) % (1000 * 60) / 1000)
? ? ? ? ? if (differ_minute.toString().length < 2) {
? ? ? ? ? ? differ_minute = "0" + differ_minute;
? ? ? ? ? }
? ? ? ? ? if (s.toString().length < 2) {
? ? ? ? ? ? s = "0" + s;
? ? ? ? ? }
? ? ? ? ? var str = differ_minute + ':' + s;
? ? ? ? ? that.setData({
? ? ? ? ? ? [insertTime]: str,
? ? ? ? ? ? [disabled]: true
? ? ? ? ? });
? ? ? ? } else {// 當(dāng)?shù)褂嫊r結(jié)束仲闽，不再進(jìn)行倒計時
? ? ? ? ? console.log("不進(jìn)行倒計時");
? ? ? ? ? that.setData({
? ? ? ? ? ? [insertTime]: '00:00',
? ? ? ? ? ? [disabled]: null
? ? ? ? ? });
? ? ? ? ? wx.removeStorageSync(insertTime)
? ? ? ? ? wx.removeStorageSync('interval' + index)
? ? ? ? ? clearInterval(interval)
? ? ? ? }
? ? ? }else{
? ? ? ? var nowTime = Date.parse(new Date());//當(dāng)前時間戳
? ? ? ? var countDownTime = nowTime + (600*1000);//時間差：(10分鐘)
? ? ? ? wx.setStorageSync(insertTime, countDownTime)
? ? ? ? that.setData({
? ? ? ? ? [insertTime]: '10:00',
? ? ? ? ? [disabled]: true
? ? ? ? });
? ? ? }
? ? }, 1000);
? }
最終效果展示：由于不能上傳視頻脑溢，所以就將就著看圖片把
