点击发送验证码(防止产生多个定时器)

<div id="app">
   <div @click="goCode">
      {{shortMessage}}
   </div>	
</div>
<script>
new Vue({
    el: '#app',
    data() {
        return {
            timer: null,
            chishitime: 60,
            shortMessage: "获取手机验证码",

        };
    },



    methods: {
        goCode() {
            if (!this.timer) {
                this.shortMessage = "60s后重新发送"; //页面一开始就显示60s后重新发送.
                this.timer = setInterval(() => {
                    if (this.chishitime > 0) {
                        this.chishitime--;
                        console.log("定时器在执行");
                        this.shortMessage = this.chishitime + "s后重新发送";
                    } else {
                        clearInterval(this.timer);
                        this.shortMessage = "获取手机验证码";
                        this.timer = null;
                        this.chishitime = 60;
                    }
                }, 1000);
            }
        },
    },


    beforeDestroy() {
        clearInterval(this.timer);
    }


})
</script>

posted @   南风晚来晚相识  阅读(293)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· 程序员常用高效实用工具推荐,办公效率提升利器!
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 【译】WinForms:分析一下(我用 Visual Basic 写的)
点击右上角即可分享
微信分享提示