使用定时器,每次往数组添加更新144个时间值,但是只想要最后144个最新的时间值


<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.27.0/moment.js"></script>
        <title>Document</title>
        <style>
                [v-cloak] {
                        display: none;
                }
        </style>
</head>
<div id="app">

        <h2 v-cloak>{{timeList}}</h2>
        <!-- <button>点击显示时间</button>
    {{time}}-{{weeks}} -->
</div>

<body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
        <script>
                new Vue({
                        el: "#app",
                        data: {
                                timeList: []
                        },
                        methods: {
                                getNowTime() {
                                        let endDate = new Date();
                                        let splitTime = 5 * 60 * 1000;
                                        let count = 144;
                                        //转为时间戳
                                        let endTime = endDate.getTime();
                                        let mod = endTime % splitTime;
                                        if (mod > 0) {
                                                endTime = endTime - mod;
                                        }
                                        while (count-- > 0) {
                                                let d = new Date();
                                                d.setTime(endTime - count * splitTime);
                                                this.timeList.push(moment(d).format("HH:mm:ss"));
                                        }
                                },
                                timer() {
                                        return setInterval(() => {
                                                setTimeout(() => {
                                                        this.getNowTime()
                                                }, 0)
                                        }, 3000)
                                }
                        },
                        created() {
                                this.getNowTime()
                        },
                        watch: {
                                timeList() {
                                        this.timer()
                                }
                        },
                        destroyed() {
                                clearTimeout(this.timer)
                        }
                })
        </script>
</body>

</html>

img

splice删掉之前的数据在重新添加


                getNowTime() {
                    this.timeList.splice(0, this.timeList.length);///////////////增加这句
//...原来的代码

img

每次调用的时候数组为空就好了
getNowTime(){
this.timeList = []
}

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632