В разработке проекта мы часто сталкиваемся с кнопкой, которая отправляет код подтверждения и нажимает 60-секундный обратный отсчет.Это очень распространено, но также очень просто, но при написании этой кнопки есть на что обратить внимание.Напишите ее сегодня , Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня!
Готовый эффект выглядит следующим образом:
Для того, чтобы показать эффект быстрее, я установил время на 5 секунд. После нажатия кнопки появится обратный отсчет, и кнопка станет некликабельной, стиль также изменится, а также изменится внешний вид наведения мыши.
Затем мы используем код для достижения:
<button class="button" @click="countDown">
{{content}}
</button>
...
data () {
return {
content: '发送验证码', // 按钮里显示的内容
totalTime: 60 //记录具体倒计时时间
}
},
methods: {
countDown() {
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.total + 's后重新发送'
},1000)
}
}
К данным добавляются две части данных, одна используется для записи времени, а другая используется для хранения определенного содержимого кнопки обратного отсчета. В функции countDown мы используем таймер setInterval, который каждую секунду вычитает 1 из totalTime и одновременно изменяет содержимое, отображаемое на кнопке.Стрелочная функция используется в window.setInterval, потому что она автоматически привязывает это снаружи, поэтому нет необходимости сначала сохранять это.
Эффект следующий:
Но есть некоторые проблемы с этой кнопкой:
- Через 1 секунду после нажатия кнопки обратный отсчет начинается сразу с 59 секунды, а 60 в середине уже нет.
- Вы также можете нажать на обратный отсчет
- Обратный отсчет еще не сброшен
Далее нам нужно продолжать улучшать функцию countDown для решения этих проблем.
countDown () {
this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) { //当倒计时小于0时清除定时器
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 60
}
},1000)
},
Приведенный выше код решает проблему отсутствия 60. В то же время, когда totalTime меньше 0, таймер очищается, содержимое кнопки сбрасывается, а totalTime сбрасывается до 60 для следующего использования.
Эффект обратного отсчета 10 секунд:
Нашел баг, после нескольких нажатий скорость обратного разговора становится быстрее, потому что каждый щелчок будет запускать setInterval, а эти setIntervals будут уменьшать totalTime. Решение тоже очень простое: просто задушить его, то есть после первого нажатия кнопки код функции countDonw не может быть выполнен, и его можно выполнить повторно после окончания обратного отсчета.
data () {
return {
content: '发送验证码',
totalTime: 10,
canClick: true //添加canClick
}
}
...
countDown () {
if (!this.canClick) return //改动的是这两行代码
this.canClick = false
this.content = this.totalTime + 's后重新发送'
let clock = window.setInterval(() => {
this.totalTime--
this.content = this.totalTime + 's后重新发送'
if (this.totalTime < 0) {
window.clearInterval(clock)
this.content = '重新发送验证码'
this.totalTime = 10
this.canClick = true //这里重新开启
}
},1000)
}
Добавьте к данным canClick, по умолчанию true, если canClick true, то код в countDown может выполняться, если false, то работать не будет. Установите для canClick значение false каждый раз, когда он выполняется, и меняйте его на true только после окончания обратного отсчета. Проблема только сейчас исчезла.
Здесь почти то же самое, но вы также можете настроить стиль:
<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
background-color: #ddd;
border-color: #ddd;
color:#57a3f3;
cursor: not-allowed; // 鼠标变化
}
Эффект:
Эта кнопка обратного отсчета очень проста, но когда я писал ее впервые, она была очень запутанной, и в то время я не знал концепции дросселирования функций, и я не знал, почему обратный отсчет был бы быстрее, если бы Я нажимал несколько раз. Теперь я понимаю, что это написано здесь. Если есть какие-то недочеты, тоже надеюсь на критику и исправление!
Это моя шестая статья о Наггетс, спасибо за просмотр!