定时器的暂停，继续，刷新

Posted 2020-11-24 ll15888

 

页面挂载的时候定时器搞起

 <el-row>
                    <div class="ui-toolbar" style="height: 32px; line-height: 32px;">
                        <div style="margin-left:10px;" :class="isExecuteTiming ? ‘green‘: ‘red‘">AUTO Refresh</div>
                        <div style="margin-left:10px; margin-right:10px;">
                            <el-input v-model="autoRefreshInterval" style="width:50px;padding:0;text-align:center" @change="RefreshIntervalChange($event)"></el-input>
                        </div>
                        <div style="color: gray;">秒</div>
                        
                        <div style="margin-left:20px;cursor: pointer" @click="stopAutoRefreshTimer()" v-if="autoRefreshTimer !== null">
                            <img style="margin-top:10px;" src="@/assets/img/icon/ico_btn_stop.png" title="停止暂停自动刷新"/>
                        </div>
                        <div style="margin-left:20px;cursor: pointer" @click="startAutoRefreshTimer()" v-else>
                            <img style="margin-top:10px;" src="@/assets/img/icon/ico_btn_start.png" title="启动暂停自动刷新"/>
                        </div>

                        <div style="margin-left:10px;cursor: pointer" @click="refreshData(curTabKey)">
                            <img style="margin-top:10px;" src="@/assets/img/icon/ico_btn_refresh.png" title="手动刷新"/>
                        </div>
                        <div ref="countDownValue" style="margin-left:10px;font-size:15px;color:red;font-weight:bold;">
                            {{countDown}}
                        </div>
                    </div>
                </el-row>

 

export default class AgentActiveServiceList extends Vue {
    @Prop(Object)
    // 自动刷新的时间间隔(单位s)
    public autoRefreshInterval: number = 10;

    // 定时器倒计时的值
    public countDown!: number;

    // 暂停时候赋值的变量
    public stopValue!: number;
    
   /**
     * 生命周期：构造函数
     */
    public constructor() {
        super();

        // 变量初始化this.countDown = this.autoRefreshInterval;
    }
}

 

/**
     * 生命周期：对象销毁完前
     */
    public mounted () {this.stopAutoRefreshTimer();

    }

    /**
     * 启动定时刷新定时器
     */
    public startAutoRefreshTimer() {

       //如果暂停过，就重新开启定时器，并把暂停时取得值传给定时器当初始值，没暂停过就以页面加载时的定时器初始值
        if (this.stopValue) {
            this.countDownDate(this.stopValue);
        } else {
            this.countDownDate(this.autoRefreshInterval);
        }
    }

    // 倒计时显示
    public countDownDate(inputDate: any) {
        // 如果之前开启过，先关闭之前的再开启新的
        if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
        } 
        // 把每次要开启定时器的值赋值给定时器，让他去自减
        this.countDown = inputDate;
　　　　　// 把定时器赋值给变量，方便日后关闭
        this.refreshInterval = setInterval(() => {
            this.countDown--;
            if (this.countDown < 1) {
　　　　　　　　　　// 如果有暂停过的情况，赋过来的值就是暂停时的值，那么每次自减循环的是暂停是的值，而不是初始值，需要判断
                    // 如果赋过来的的值 不等于 初始值，就把初始值赋给传过来的值，还不明白的话试一把就知道了

                inputDate !== this.autoRefreshInterval ? this.countDown = this.autoRefreshInterval : this.countDown = inputDate;

            }
        }, 1000);
    }

 

 停止

/**
     * 停止自动刷新定时器
     */
    public stopAutoRefreshTimer() {
        //清除定时器
        clearInterval(this.refreshInterval);

　　　　　//暂停的值存起来
        that.stopValue = that.$refs.countDownValue.innerText;
    }

继续

/**
     * 启动定时刷新定时器
     */
    public startAutoRefreshTimer() {

       //如果暂停过，就重新开启定时器，并把暂停时取得值传给定时器当初始值，没暂停过就以页面加载时的定时器初始值
        if (this.stopValue) {
            this.countDownDate(this.stopValue);
        } else {
            this.countDownDate(this.autoRefreshInterval);
        }
    }

刷新

/**
     * 刷新数据
     */
    public refreshData() {
        //赋初值开启定时器即可this.countDownDate(this.autoRefreshInterval);
    }