微信小程序 点击获取验证码（节流）讲解在代码中

多次点击一段时间内 只执行一次---------节流

一段时间点击多次 只执行最后一次--------防抖

页面.wxml

<text class="getCode" bindtap="getCode">{{getCode=="1"?'获取验证码': getCode==2?"重新获取":changeCode+'s' }}</text>

样式,wxss

.loginInfo .userInfo .inputBox .getCode {
    width: 170rpx;
    height: 70rpx;
    background-color: #e2e2e2;
    line-height: 70rpx;
    text-align: center;
    font-size: 28rpx;
    color: #4566ff;
    border-radius: 40rpx;
}

逻辑.js

Page({
    data: {
        getCode: "1",  // 控制文字显示隐藏
        changeCode: 5, // 倒计时时间
        changeCodeFlag: false, // 节流值
    },
    getCode() {
        if (this.data.changeCodeFlag) return // 默认值false 第一次不return
        this.setData({ changeCodeFlag: true, getCode: "3" }) // 改为true 计时不结束一直return
        // 定义定时器 方便清除
        let timer = setInterval(() => {
            // 倒计时数字 每秒自减1 
            this.data.changeCode--;
            // 每次自减一 再赋值给它本身
            this.setData({
                changeCode: this.data.changeCode,
            })
            // 判断 显示为0s时 结束定时器 将'重新获取'显示出来 将节流值改为false 将倒计时复原
            if (this.data.changeCode === -1) {
                clearInterval(timer)
                this.setData({ getCode: "2", changeCode: 5, changeCodeFlag: false })
            }
        }, 1000);
    },
})