Cocos Creator製作倒計時顯示的優化

使用新的方式來實現倒計時的顯示

---

在進行倒計的時候只需要記錄幾個變量
1，總的倒計時時間，
2，倒計時開始的時候的時間戳
3，是否進行新的一輪倒計時的標誌

實現方法

新建一個腳本管理數據腳本如下

var dataOperate = require("dataOperateFunc");

var StoreData = {
    // 數據發在內部，提供接口訪問
    _totalCountdownNum: 7200,   //倒計時時間
    _isUse: false,   //免費刷新是否使用
    _timestampOfDeparture: 0,   //倒計時的時間戳

    InitData: function () {
        var tempData = dataOperate.getBlobMapByKey("store_data");
        var date = new Date();
        console.log("#### store data", tempData);
        if (!!tempData) {;
            this._isUse = tempData.is_use;
            this._timestampOfDeparture = tempData.timestamp_of_departure;
            
            if (date.getDate() != tempData.last_date) {
                this._refreshNum = 1;
            } else {
                this._refreshNum = tempData.refresh_num;
            }
        } else {
            this._timestampOfDeparture = date.getTime();
            // console.log("!!! not have guide info use default", this.isGuide, this.stageName, this.stageStep);    
        }
    },

    SetData: function () {
        var date = new Date();
        var currentDate = date.getDate();

        var tempData = {
            last_date: currentDate,
            refresh_num: this._refreshNum,
            timestamp_of_departure: this._timestampOfDeparture,
            is_use: this._isUse,
            buy_num: this._buyNum,
        }

        dataOperate.updateBlobMapKeyValue({
            store_data: tempData
        });
    },

    GetCountdownInfo: function () {
        let data = {
            isUse: this._isUse,
            timestamp: this._timestampOfDeparture,
            totalCountdownTime: this._totalCountdownNum,
        }
        return data;
    },

    /**
     * 設置倒計時的相關信息
     * @param {boolean} useState 免費刷新的使用狀態
     * @param {number} timestamp 使用時的時間戳
     */
    SetCountdownInfo: function (useState, timestamp) {
        this._isUse = useState;
        if (!!timestamp) {
            this._timestampOfDeparture = timestamp;
        }
        this.SetData();
    },
    
}

module.exports = StoreData;

在建立一個腳本進行倒計時的顯示代碼如下

var storeData = require("StoreData"); //引入倒計時的數據

cc.Class({
    extends: cc.Component,
        infoLabel: cc.Label,
    },

    onLoad() {
        this._countdownSecond = 0;	//   **用於在當前界面的倒計時計算**  
        this.intervalTime = 1;	//  **用於每秒進行一下計算**    
     
    },

    onEnable() {
        this.InitCountdown();
    },

    start() {},

    update(dt) {
        if (this.intervalTime >= 0) {
            this.intervalTime -= dt;
        } else {
            this.intervalTime = 1;
            if (this._countdownSecond >= -1) {
                this.UpdateCountdown();
            }
        }
    },

    InitCountdown: function () {
        var countdownInfo = storeData.GetCountdownInfo();
        // console.log("#### 商店倒計時信息", countdownInfo);
        var date = new Date();
        if (countdownInfo.isUse) {
            this._countdownSecond = countdownInfo.totalCountdownTime - Math.floor((date.getTime() - countdownInfo.timestamp) / 1000);
            //  **當前剩餘的倒計時數用倒計總時間減去已經過去的時間**  
        } else {
            this._countdownSecond = 0;
        }

        this.UpdateCountdown();
    },

    UpdateCountdown: function () {
        var baseSecond = this._countdownSecond;
        var countdownInfo = storeData.GetCountdownInfo();
        if (baseSecond >= 1) {
            baseSecond -= 1;
            this._countdownSecond -= 1;
            var hour = Math.floor(baseSecond / 3600);
            var residue = baseSecond - hour * 3600;
            var minute = Math.floor(residue / 60);
            residue = Math.floor(residue - minute * 60);
            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (residue < 10) {
                residue = "0" + residue;
            }
            // this.infoLabel.getComponent(cc.Label).string = hour + " : " + minute + " : " + residue + " 後免費" + this.PriceCalculation();
        } else {
            if (countdownInfo.isUse) {
                let date = new Date();
                storeData.SetCountdownInfo(false, date.getTime());
                // this.infoLabel.getComponent(cc.Label).string = "" + this.PriceCalculation();
            }
        }
    },

這個優化主要是減少了一些用於控制的變量，使得在初始化倒計時變得簡單，同時也不用在每次關閉窗口時就要記錄一下時間戳了。這段代碼是項目中摘取出來的，有些地方可能的無關變量可能沒有清理乾淨，望見諒。 同時希望有更好的方式，能夠學習，望指教，謝謝！