发送验证码，倒计时效果

前言：

我所使用vue3中的setup语法糖所实现。以下代码并不是只可以在vue3中使用

防抖：任务频繁触发的情况下，只有任务触发的间隔超过指定的间隔时，任务才会执行。如果n秒内高频事件再次被触发，则重新计算事件

实现代码

<template>
  <div>
    <h2>{{ time }}</h2>
    <button @click="handleClick">{{ str }}</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
let str = ref("倒计时");
let isClick = ref(false);
let time = ref(10);
const handleClick = () => {
  if (isClick.value) return false;
  isClick.value = true;
  let timer = setInterval(() => {
    time.value--;
    str.value = `剩余${time.value}秒`;
    if (time.value < 1) {
      clearInterval(timer);
      isClick.value = false;
      time.value = 10;
      str.value = `再次发送`;
    }
  }, 1000);
};
</script>