U 轮播 加倒计时

whychw

2020-07-17 5a67ca775c35626f3d18e3f7e18e8c0223aef335

U 轮播 加倒计时

 src/assets/js/Timeout.js

@@ -20,6 +20,22 @@
        console.warn('未完整配置参数！');
    }
};

// 开启计时器不立即执行
Timeout.prototype.startDelay = function(callback, time) {
    // 先关闭计时器
    this.stop();
    // 配置执行函数
    if(typeof callback == 'function' && typeof time == 'number') {
        this.callback = callback;
        this.time = time;

        this.timer = setTimeout(callback, time);
    }else {
        console.warn('未完整配置参数！');
    }
};

// 开启计时器
Timeout.prototype.open = function() {
    var callback = this.callback;
@@ -27,6 +43,7 @@
    this.start(callback, time, 'exe');
};


// 关闭计时器
Timeout.prototype.stop = function() {
    clearTimeout(this.timer);

 src/pages/index.vue

@@ -9,7 +9,7 @@
                <input type="checkbox" v-model="switch_status" class="control" />
              </label>
            </div>
            <div class="">轮播间隙:<el-input class="timeInput" placeholder="请输入时间间隔" v-model.number="battList.delayTime" @input="timeChange"></el-input></div>
            <div class="">轮播间隙(秒):<el-input class="timeInput" placeholder="请输入时间间隔" v-model.number="battList.delayTime" @input="timeChange"></el-input>{{countDown}}秒</div>
            <div class="btn_3d" @click="prev">上一个</div>
            <div class="btn_3d" @click="next">下一个</div>
        </div>
@@ -141,6 +141,9 @@
                timer: new Timeout(),
                delayTime: 4
            },
            // 倒计时
            countDown: 0,
            countDownTimer: new Timeout(),
            rtstate: {
                timer: new Timeout(),
                data: {
@@ -214,6 +217,9 @@
            this.startFindrtstate();
            // 开始查询电池组实时信息
            this.startFindrtdata();
            if (this.switch_status) {
                this.countDownStart();
            }
        },
        startFindrtstate() {
            this.rtstate.timer.start(()=>{
@@ -221,15 +227,17 @@
            }, 4000);
        },
        startLB () {
            if (!this.battList.delayTime || this.battList.delayTime < 0.6) {
                this.battList.delayTime = 0.6;
            if (!this.battList.delayTime || this.battList.delayTime < 1) {
                this.battList.delayTime = 1;
            }

            this.countDownStart();
            this.battList.timer.start(() => {
                let data = this.$store.state.allBattList;
                let len = data.length;
                this.$store.dispatch('changeBattGroup', data[idx]);
                idx++;
                idx = idx % len;
                this.$store.dispatch('changeBattGroup', data[idx]);
                this.battList.timer.open();
            }, this.battList.delayTime * 1000);
        },
@@ -243,10 +251,12 @@
        },
        stopLB () {
            this.battList.timer.stop();
            this.countDownStop();
        },
        //  上一个站
        prev () {
            this.switch_status = false;
            this.countDownStop();
            let data = this.$store.state.allBattList;
            let len = data.length;
            idx--;
@@ -258,11 +268,23 @@
        //  下一个站
        next () {
            this.switch_status = false;
            this.countDownStop();
            let data = this.$store.state.allBattList;
            let len = data.length;
            idx++;
            idx = idx % len;
            this.$store.dispatch('changeBattGroup', data[idx]);
        },
        countDownStop () {
            this.countDownTimer.stop();
        },
        countDownStart () {
            this.countDownTimer.stop();
            this.countDown = this.battList.delayTime;
            this.countDownTimer.startDelay(() => {
                this.countDown--;
                this.countDownTimer.open();
            }, 1000);
        },
        initRtState() {     // 初始化rtstate
            var data = {
@@ -474,6 +496,7 @@
        }
    },
    mounted() {
        this.countDown = this.battList.delayTime;
        this.getAllBattGrp();
        // 设置导航栏
        this.$store.dispatch('changeNavActive', 0);
@@ -590,9 +613,9 @@
}
.timeInput {
    background: transparent;
    width: 10rem;

    width: 6rem;
    margin-left: 1rem;
    margin-right: 1rem;
}
.btn_3d {
    margin-left: 1rem;