前言

今天用@vueuse/core中提供的一个方法，实现发送验证码时倒计时的一个效果。这样的场景使我们经常会见到的，一起来看一下如何实现

一、应用场景

用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。

所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。

二、代码演示

用到的button全局组件 ===》vue3——自己封装按钮组件

使用@vueuse/core中的useIntervalFn来帮助我们完成这项工作

首先需要在项目根目录下打开任意终端,执行npm i @vueuse/core@5.3.0

代码如下（示例）：

<template>
  <div class="home-container">
    <my-button type="plain" size="middle" @click="sendCode">{{
      timer === 0 ? '发送验证码' : `${timer}s后重新获取`
    }}</my-button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useIntervalFn } from '@vueuse/core'
export default {
  name: 'App',
  setup() {
    // 倒计时
    const timer = ref(0)
    // 发送验证码倒计时
    // useIntervalFn(定时的回调，回调的时间间隔，控制回调的调用方式)
    // 参数三 {immediate: true, immediateCallback: false}
    // 3-1) immediate 首次运行useIntervalFn函数时，是否立刻开启定时任务（默认值true表示默认开启）
    // 3-2）immediateCallback 执行useIntervalFn函数立刻执行回调（在延时时间的前或者后调用），默认值是false，如果修改为true，表示为不延时，立刻启动定时任务（不要使用pause方法）
    // pause暂停；resume启动
    const { pause, resume } = useIntervalFn(
      () => {
        if (timer.value <= 0) {
          // 停止定时任务
          pause()
        } else {
          // 单次定时任务执行的回调
          timer.value--
        }
      },
      1000,
      {
        // 默认不开启定时任务
        immediate: false
      }
    )

    // 发送验证码
    const sendCode = () => {
      // 开启倒计时效果
      if (timer.value === 0) {
        timer.value = 60
        resume()
      } else {
        return
      }
      // 这里写向后台发送请求的代码
      console.log('发送请求')
    }
    return { timer, sendCode }
  }
}
</script>

<style lang="less">
.home-container {
  margin: 100px auto;
  width: 300px;
  height: 100px;
}
</style>

三、 效果演示

这里将倒计时的时间调整的短一些，方便给大家演示。

可以看到规定时间内，想要执行的代码只能执行一次。

总结

Constant dropping wears the stone.