vue js定时器

Question

在template

<li v-for="item in items">
                    <p class="time"><span>{{ item.timer }}</span></p>
                    <div class="main self">
                        <img class="avatar" src="@/assets/img/2.jpg" alt="" />
                        <div class="text">
                            {{ item.label }}
                        </div>
                    </div>
                </li>

data中

            timer: '',
            items: [],
            newItem: '',

methods 中

seed() {
            if(this.$refs.textarea.value === '') {
                this.$Message.error('不能发送空白信息');
            } else {
                var date = new Date();
                var hour = date.getHours(); //时
                var minute = date.getMinutes(); //分
                var second = date.getSeconds(); //秒
                if(hour < 10 ) {
                    hour = '0' + hour
                }
                if(minute < 10){
                    minute = '0' + minute
                }
                if(second < 10){
                    second = '0' + second
                }
                
                this.timer = hour + ':' + minute + ':' + second;
                this.items.push({
                    label: this.newItem,
                    isFinished: false,
                    timer: this.timer
                })
                this.newItem = '';
            }
        }

现在的问题是：每次点击发送的时候都会显示时间，但我想隔三分钟才显示时间，请问怎么解决

Answer 1

你可以每次发送成功都记录一下上一次的发送时间，下一次发送的时候通过比对来判断是否显示

Answer 2

目测是个对话类功能，确认一点，采用什么方法完成的类似功能；
1.轮询：发送时暂存发送时间，每次轮询时取当前时间对比缓存时间，达到条件进行后续操作；
2.长轮询/websocket：交由后端监听时间并返回标识。