【Vue】可暂停计时器

实现计时器，暂停，在开始后继续之前的计时。

<template>
    <div class="task">
        <div class="task-header">
            <img src="../../../../assets/task/ic_task_tracking_bg_deep.png" alt="header" class="task-header-bg">
            <div class="task-header-nav">
                <van-icon name="arrow-left" color="white" size="22"/>
                <p class="task-header-nav-title">任务进行中</p>
                <p></p>
            </div>
        </div>
        <div class="task-content">
            <img src="../../../../assets/task/ic_task_tracking_bg_light.png" alt="header" class="task-content-bg">
            <div class="task-content-top">
                <p class="task-content-title">{{title}}</p>
                <div class="task-content-mileage">
                    <p class="task-content-mileage-value">{{mileage}}<span class="task-content-mileage-unit">公里</span></p>
                </div>
            </div>
            <div class="task-content-bottom">
                <img src="../../../../assets/task/ic_task_tracking_duration.png" class="task-content-duration-icon">
                <div class="task-content-timer">
                    <p id="lazy">00:00:00</p>
                </div>
                <p class="task-content-duration-title">时长</p>
            </div>
        </div>
        <div class="task-operation">
            <template v-if="state === 0">
                <img src="../../../../assets/task/ic_task_suspend_icon.png" @click="onTaskSuspend"
                     class="task-operation-icon">
            </template>
            <template v-if="state === 1">
                <img src="../../../../assets/task/ic_task_next_icon.png" @click="onTaskNext"
                     class="task-operation-icon">
                <img src="../../../../assets/task/ic_task_stop_icon.png" @click="onTaskStop"
                     class="task-operation-icon ml35">
            </template>
        </div>
    </div>
</template>

<script>
    import { Dialog } from 'vant'
    export default {
        name: "OperationTaskOngoing",
        data () {
            return {
                title: '瑞珂小园',
                mileage: '0.00',
                state: 0, // 0开始 1暂停
                one_second: 1000,
                one_minute: 0,
                one_hour: 0,
                startDate: new Date(),
                suspendDate: 0,
                timer: null,
                timeOut: null
            }
        },
        mounted () {
            this.one_minute = this.one_second * 60
            this.one_hour = this.one_minute * 60
            this.timer = document.getElementById('lazy')
            this.startTimer()
        },
        methods: {
            onClickLeft() {
                this.$router.back()
            },

            // 暂停
            onTaskSuspend () {
                this.state = 1
                window.clearTimeout(this.timeOut)
            },
            // 继续
            onTaskNext () {
                this.state = 0
                let arr = this.timer.innerText.split(':')
                let seconds = parseInt(arr[0]*3600+arr[1]*60+arr[2])
                let t = new Date().getTime() - seconds*1000
                this.startDate = new Date(t)
                this.startTimer()
            },
            // 结束
            onTaskStop () {
                Dialog.confirm({
                    message: '是否要结束任务吗？',
                })
                    .then(() => {
                        // on confirm
                        this.onClickLeft()
                    })
                    .catch(() => {
                        // on cancel
                    });
            },

            startTimer () {
                let now = new Date()
                    , elapsed = now - this.startDate
                    , parts = [];

                parts[0] = '' + Math.floor( elapsed / this.one_hour );
                parts[1] = '' + Math.floor( (elapsed % this.one_hour) / this.one_minute );
                parts[2] = '' + Math.floor( ( (elapsed % this.one_hour) % this.one_minute ) / this.one_second );

                parts[0] = (parts[0].length == 1) ? '0' + parts[0] : parts[0];
                parts[1] = (parts[1].length == 1) ? '0' + parts[1] : parts[1];
                parts[2] = (parts[2].length == 1) ? '0' + parts[2] : parts[2];

                this.timer.innerText = parts.join(':');

                this.requestAnimationFrame(this.startTimer)
            },

            requestAnimationFrame (callback) {
                this.timeOut = window.setTimeout(callback, 1000 / 60)
            }
        }
    }
</script>

<style scoped lang="scss">
.task {
    position: relative;
    .task-header {
        position: relative;
        .task-header-bg {
            width: 100%;
        }
        .task-header-nav {
            position: absolute;
            top: 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: calc(100% - 30px);
            margin: 0 15px;
            .task-header-nav-title {
                font-size: 15px;
                color: white;
            }
        }
    }
    .task-content {
        position: absolute;
        top: 70px;
        margin: 0 15px 0;
        background-color: white;
        padding-bottom: 50%;
        border-radius: 6px;
        .task-content-bg {
            width: 100%;
        }
        .task-content-top {
            position: absolute;
            top: 50px;
            width: 100%;
            text-align: center;
            .task-content-title {
                font-size: 16px;
                font-weight: 600;
                color: #666666;
                letter-spacing: 2px;
            }
            .task-content-mileage {
                margin-top: 50px;
                .task-content-mileage-value {
                    font-size: 50px;
                    color: #666666;
                    font-weight: 600;
                    .task-content-mileage-unit {
                        font-size: 14px;
                        font-weight: 500;
                    }
                }
            }
        }
        .task-content-bottom {
            position: absolute;
            bottom: 50px;
            width: 100%;
            text-align: center;
            .task-content-duration-icon {
                height: 30px;
            }
            .task-content-duration-title {
                font-size: 14px;
                color: #999999;
                margin-top: 20px;
            }
            .task-content-timer p {
                font-size: 24px;
                color: #999999;
                margin-top: 20px;
            }
        }
    }

    .task-operation {
        display: flex;
        align-items: center;
        justify-content: center;
        .task-operation-icon {
            width: 80px;
            margin-top: 50%;
            padding-top: 30px;
        }
    }
}
</style>