body代码

 <button>
    点击获取验证码
</button>

功能:

点击一下按钮, 让按钮变成 X秒后可以重新执行, 并且在 5秒内不能重新执行

点击一下按钮, 按钮变成 5秒后可以重新执行, 在着 5秒内点击这个 按钮, 不能重复触发

0. 获取元素

    var btn = document.querySelector('button')
    
    

0. 准备变量

    var flag = true

1. 给元素添加点击事件

    btn.onclick = function () {
        if (flag === false) return

        console.log('当前点击事件执行')
        var count = 5
        btn.innerText = `${count} 秒后可以重新执行`

        flag = false

        var timeId = setInterval(function () {
            count--
            btn.innerText = `${count} 秒后可以重新执行`

            if (count === 0) {
                btn.innerText = '点击获取验证码'
                clearInterval(timeId)
                flag = true
            }
        }, 1000)
    }

第一次点击按钮时

flag === true, 所以 31 行 if 判断不可能会执行, 函数会正常往下执行

执行到 37 行的时候, 会将 变量 flag 赋值 为 false; 然后再 5 秒钟以后重新赋值为 true

第二次点击按钮时 (与第一次点击完成时间间隔只有 3 秒钟)

flag === false, 所以 31 行 if 判断条件成立, 执行代码 return, 所以函数就此中断

第三次点击按钮时 (与第一次点击完成时间间隔有 30 秒钟)

flag === true, 所以 31 行 if 判断不可能会执行, 函数会正常往下执行

执行到 37 行的时候, 会将 变量 flag 赋值为 false; 然后 5 秒钟以后重新赋值为 true