zoukankan      html  css  js  c++  java
  • vue获取验证码--节流

    节流

    节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数

    vue项目 验证码登录--以及倒计时

    <template>
    <button @click="handleCaptcha">{{captcha}}</button>
    </template>
    
    <script>
    export default {
        name: "Login",
        data() {
            return {
                captcha: "获取验证码",
                totalTime: 60,
                canClick: true,    // 节流
                clockTimer: null, // 定时器
            }
        }, 
        methods: {
            handleCaptcha() {
                if (!this.canClick) return  // 节流 防止频繁访问接口
                this.canClick = false
                console.log('进入倒计时...')
                this.captcha = this.totalTime + 's后重新发送'
                let that = this
                that.clockTimer = window.setInterval(() => {
                    that.totalTime--
                    that.captcha = that.totalTime + 's后重新发送'
                    if (that.totalTime < 0) {
                        window.clearInterval(that.clockTimer)
                        that.captcha = '重新发送验证码'
                        that.totalTime = 60
                        that.canClick = true
                    }
                },1000)
            },
        }
    }
    </script>
  • 相关阅读:
    有一种努力叫“凌晨四点”
    编程思想
    小记
    团队精神与集体主义
    变量起名
    软件项目估量方法
    戏说QQ
    压力说
    AngularJS指令基础(一)
    Leetcode 1021. Best Sightseeing Pair
  • 原文地址:https://www.cnblogs.com/wjz-page/p/12883782.html
Copyright © 2011-2022 走看看