老师,我想实现倒计时60秒,但是怎么就是不行呢?

来源:8-5 图片组件占位图开发

慕无忌4210873

2020-05-20

![图片描述

写回答

2回答

扬_灵

2020-05-21

同学你好,我在本地运行你的代码是可以的,实现的是获取验证码倒计时60秒,能不能把你的问题说详细点,不过在运行你代码的时候发现的几个问题:

     1. 第一次启动正常但是在第二次启动的时候就出现问题了,在时间没结束时会创建多个定时器更改seconds的值,

    2. 当时间结束之后再次点击时间没有从59开始。

你可以把定时器定义成data的一个属性,默认为空,每次点击获取验证码的时候判断this.timer是否存在,只有为空的时候才执行定时器的内容。等执行完毕之后在恢复默认值就好了。第二个问题是在定时器结束的时候需要将时间恢复为59不然第二次执行的时候就是从0开始的

countDown () {
    if (!this.timer) {
        this.isSend = true
        this.timer = setInterval(() => {
            this.seconds--
            if (this.seconds === 0) {
                clearInterval(this.timer)
                this.timer = ''
                this.seconds = 59
                this.isSend = false
            }
        }, 1000)
    }
}

如果不能解决你的问题,可以继续追问。

1
2
扬_灵
回复
慕无忌4210873
同学你好,在源代码中countDown函数中的每次点击的时候都会执行创建timer,如果在第一个定时器没有执行完毕的时候再次点击按钮这时就会出现倒计时加快的效果
2020-05-25
共2条回复

扬_灵

2020-05-21

同学你好,这个逻辑是没有问题的,你可以把代码上传一下吗,我在本地看一下

0
1
慕无忌4210873
代码:https://git.imooc.com/ZENGAHB/junkie/src/master/ewallet
2020-05-21
共1条回复

零基础入门 实战mpvue2.0多端小程序框架

mpvue,一套代码搞定多个平台小程序,前端更易上手

819 学习 · 647 问题

查看课程