vue3 中实现 验证码发送 刷新不变倒计时

   今天实现一个倒计时的功能

   在平常开发前端的功能的时候 不管是 移动端还是web端 我们都会有注册 登录 中的发送验证码功能 实现绑定以及注册功能。今天我主要分享一下当前的验证码实现原理。

有两种做法(我目前认为以及看到的)

① 做一个简单的倒计时 

② 实时监测倒计时 刷新还是 当前的时间

倒计时 好做 

无非是一个 setTimeInterval  无非一个倒计时的函数

我只说这个 实时监测倒计时 刷新还是 当前的时间(基础版)

直接上代码

 <nut-buttonv-if="!yzData.countDownIng":disabled="!formatPhoneInput()"size="mini"color="linear-gradient(to right, #5232B7,#7237BC)"@click="getCodeYZM"style="font-size: 8px"type="danger">验证码</nut-button><nut-buttonstyle="color: #5232b7; display: block; width: auto; width: 50px"v-if="yzData.countDownIng">{{ yzData.countDownTime }}s</nut-button>>

这个是按钮

const yzData = reactive({countDownTime: 60,timer: null,countDownIng: false,
});//获取验证码倒计时
const countDown = () => {let startTime = localStorage.getItem("startTimeLogin-dp");let nowTime = new Date().getTime();if (startTime) {let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);yzData.countDownTime = surplus <= 0 ? 0 : surplus;} else {yzData.countDownTime = 60;localStorage.setItem("startTimeLogin-dp", nowTime);}yzData.timer = setInterval(() => {yzData.countDownTime--;yzData.getCodeDisabled = true;yzData.countDownIng = true;if (yzData.countDownTime <= 0) {localStorage.removeItem("startTimeLogin-dp");clearInterval(yzData.timer);yzData.countDownTime = 60;yzData.countDownIng = false;}}, 1000);
};
const initCount=()=>{let sendEndTime = localStorage.getItem("startTimeLogin-dp");if (sendEndTime) {yzData.countDownIng = true;countDown();}}onMounted(() => {initCount()
});

以上就是将倒计时时间存储在了当前的内存中每一次刷新 都是原来的倒计时时间 除非用户把内存删了 当然 用户一般也不懂这个 也不会去删的

initCount()函数 无非就是当用户刷新的时候 可以每次获取内存中的时间戳 其实逻辑也很简单 代码复制 直接就能使用

下面我说一下 当前的进阶版的倒计时

倒计时 不一定会非在注册验证码 的时候使用 如果在真正的业务逻辑中使用 假如 有十条数据 都需要用到不同的倒计时 我们该怎么办 我上面说的 只是 全局的一个倒计时  因为每个用户打开的注册 登录页面只有一个 如果十条数据都要用到不同的倒计时咋办?

 我还是直接上代码 我说一下我这里的业务逻辑 

这里有一个按钮 哈 我 这里会有不同的机器人 这个按钮点击的时候 会调用接口 后端异步更新商品 但是此时我不想让用户 频繁点击 因为要考虑到性能问题 所以我在这里做了一个倒计时 ,我一开始直接将这个上面的倒计时 用在这里了 发现可以使用 但是切换机器人 还是那个倒计时 不符合我的业务逻辑 所以我需要给每一个机器人一个倒计时对象

希望你能看懂我的业务逻辑再去看下面的代码


const yzData = reactive({countDownTime: 60,timer: null,countDownIng: false,
})
const STORAGE_KEY_PREFIX = 'SynchronizeProductTime-'
const resultYzData = ref({})
const yzDataList = ref([])
//获取验证码倒计时
const countDown = (robotId: any) => {let item: any = getCurrentItem(robotId)let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)let nowTime = new Date().getTime()if (startTime) {let surplus = 60 - parseInt((nowTime - parseInt(startTime)) / 1000, 10)item.countDownTime = surplus <= 0 ? 0 : surplus} else {item.countDownTime = 60localStorage.setItem(STORAGE_KEY_PREFIX + robotId, nowTime.toString())}item.timer = setInterval(() => {item.countDownTime--item.countDownIng = trueif (item.countDownTime <= 0) {localStorage.removeItem(STORAGE_KEY_PREFIX + robotId)clearInterval(item.timer)item.countDownTime = 60item.countDownIng = false}}, 1000)
}// 清除与指定robotId关联的定时器
const clearTimerForRobotId = (robotId: string) => {const item = yzDataList.value.find(item => item.id === robotId)if (item && item.timer) {clearInterval(item.timer)item.timer = null}
}
const initCountDown = (robotId: any) => {clearTimerForRobotId(robotId)let startTime = localStorage.getItem(STORAGE_KEY_PREFIX + robotId)let item: any = getCurrentItem(robotId)if (startTime) {item.countDownIng = truecountDown(robotId)} else {resetItemCountDown(item)}
}
//获取默认的倒计时item
const getCurrentItem = (robotId: any) => {let item: any = yzDataList.value.find(item => item.id === robotId)if (!item) {item = reactive({ ...yzData, id: robotId }) // 使用新的ID创建一个新的倒计时对象yzDataList.value.push(item) // 添加到列表中,如果需要的话}resultYzData.value = item // 更新当前选中的倒计时对象return item
}
//重置倒计时的使劲按 清楚倒计时
const resetItemCountDown = (item: any) => {item.countDownTime = 60item.countDownIng = falseif (item.timer) {clearInterval(item.timer)item.timer = null}
}

按钮

<a-buttontype="primary"@click="syncRobotProduct":disabled="resultYzData.countDownIng">{{resultYzData.countDownIng? `同步当前机器人商品 ${resultYzData.countDownTime}`: '同步当前机器人商品'}}</a-button>

yzDataList : 当前你需要 给你的每一个数据整理出来 拿到Id 像我这样

data.list.forEach((item: any) => {yzDataList.value.push({id: item.id,countDownTime: 60,timer: null,countDownIng: false,})})

这个id 是区分当前倒计时重要的一点

clearTimerForRobotId: 方法  清楚当前机器人的时间timer 这个很重要 防止你切换机器人 性能 问题 因为你切换了其他的机器人 之前的那个timer 就要被停止

其他的代码都差不多了  主体部分就是 countDown  处理时间的 基本就和基础版的差不多了 就是存了一个id 代表不同的数据

大家可以看看 不懂的call 我就行

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/351757.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Web的UI自动化基础知识

目录 1 Web自动化入门基础1.1 自动化知识以及工具1.2 主流web自动化测试工具1.3 入门案例 2 使用工具的API2.1 元素定位2.1.1 id选择器2.1.2 name2.1.3 class_name选择器2.1.4 tag_name选择器2.1.5 link_text选择器2.1.6 partial_link_text选择器2.1.7 xpath选择器2.1.8 CSS选择…

使用python绘制三维直方图

使用python绘制三维直方图 三维直方图定义特点 效果代码 三维直方图 维直方图&#xff08;3D直方图&#xff09;是一种用于展示三维数据分布情况的图表。它扩展了二维直方图的概念&#xff0c;通过在三维空间中绘制柱体来表示数据在三个维度&#xff08;X、Y、Z&#xff09;上…

Excel中多条件判断公式怎么写?

在Excel里&#xff0c;这种情况下的公式怎么写呢&#xff1f; 本题有两个判断条件&#xff0c;按照题设&#xff0c;用IF函数就可以了&#xff0c;这样查看公式时逻辑比较直观&#xff1a; IF(A2>80%, 4, IF(A2>30%, 8*(A2-30%),0)) 用IF函数写公式&#xff0c;特别是当…

Spring配置那些事

一、引言 配置是一个项目中不那么起眼&#xff0c;但却有非常重要的东西。在工程项目中&#xff0c;我们一般会将可修改、易变、不确定的值作为配置项&#xff0c;在配置文件/配置中心中设置。 比方说&#xff0c;不同环境有不同的数据库地址、不同的线程池大小等&#xff0c…

XSKY 在金融行业:新一代分布式核心信创存储解决方案

近日&#xff0c;国家金融监督管理总局印发了《关于银行业保险业做好金融“五篇大文章”的指导意见》&#xff0c;在数字金融领域提出明确目标&#xff0c;要求银行业保险业数字化转型成效明显&#xff0c;数字化经营管理体系基本建成&#xff0c;数字化服务广泛普及&#xff0…

opencv-python(八)

import cv2 import numpy as npheight 160 width 280 image np.zeros((height, width),np.uint8) cv2.imshow(image,image) cv2.waitKeyEx(0) cv2.destroyAllWindows() 二维数组代表一幅灰度图像。 import cv2 import numpy as npheight 160 width 280 image np.zeros((he…

为何云原生是未来?企业IT架构的颠覆与重构(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、什么是云原生 2、云原生的背景和起源 背景 起源 关…

ROS机器人小车建模仿真与SLAM

文章目录 一、URDF二、创建小车模型1.创建功能包2.导入依赖3.创建urdf,launch文件&#xff1a;4.可视化 三、添加雷达1.xacro文件2.集成和修改launch3.添加摄像头和雷达 三.GAZEBO仿真四、orbslam2kitti1.下载2.安装编译ORB_SLAM23.运行Kitee数据集 一、URDF ​ URDF&#xff…

Java 集合框架:LinkedList 的介绍、使用、原理与源码解析

大家好&#xff0c;我是栗筝i&#xff0c;这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 014 篇文章&#xff0c;在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验&#xff0c;并希望进…

Guitar Pro 8软件安装包下载

简介&#xff1a; Guitar Pro吉他软件为帮助所有吉他爱好者学习、绘谱、创作而设计——包含吉他的现有指法及音色&#xff0c; Guitar Pro能了解各类线谱&#xff0c;看谱练吉他&#xff0c;对谱听示范&#xff0c;记录初创声音。 在做弹拨乐器的滑音、倚音、推弦、揉弦、泛…

python图像处理库-PIL(Pillow)

PIL库全称为Python Imaging Library&#xff0c;即Python图像处理库&#xff0c;是一个在Python中用于处理图像的非常流行的库。 一、PIL介绍 这个库提供了广泛的文件格式支持、高效的内部表示以及相当强大的图像处理功能。 核心图像库旨在快速访问存储在几种基本像素格式中的数…

Excel报表

(Apache POI) 入门案例 P164 使用POI需要导入下面2个坐标&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId> </dependency> <dependency><groupId>org.apache.poi</groupId>&…

Python基础教程(二十三):JSON数据解析

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

LabVIEW常用的加密硬件

LabVIEW在工程和科学领域中广泛应用&#xff0c;其中数据保护和程序安全尤为重要。为了确保数据的安全性和完整性&#xff0c;常用的加密硬件设备包括TPM&#xff08;可信平台模块&#xff09;、HSM&#xff08;硬件安全模块&#xff09;和专用加密芯片。本文将推荐几款常用的加…

部署大模型LLM

在autodl上部署大模型 windows运行太麻烦&#xff0c;环境是最大问题。 选择云上服务器【西北B区 / 514机】 cpp (c c plus plus) 纯 C/C 实现&#xff0c;无需外部依赖。针对使用 ARM NEON、Accelerate 和 Metal 框架的 Apple 芯片进行了优化。支持适用于 x86 架构的 AVX、…

猎食者优化算法 Python代码免费获取

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类算法的家人&#xff0c;可关注我的VX公众号&#xff1a;python算法小当家&#xff0c;不定期会有很多免费代码分享~ 猎食者优化算法 Python代码免费获取 猎食者优化算法(hunter–…

基于GTX的64B66B编码IP生成(高速收发器二十)

点击进入高速收发器系列文章导航界面 1、配置GTX IP 相关参数 前文讲解了64B66B编码解码原理&#xff0c;以及GTX IP实现64B66B编解码的相关信号组成&#xff0c;本文生成64B66B编码的GTX IP。 首先如下图所示&#xff0c;需要对GTX共享逻辑进行设置&#xff0c;为了便于扩展&a…

什么是微前端

什么是微前端&#xff1f; 微前端 这个名词&#xff0c;第一次被提出还是在2016年底&#xff0c;那是在 ThoughtWorks Technology Radar。这个概念将微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化&#xff0c;富交互…

RPG游戏完整指南

环境&#xff1a;unity2021urp 本教程教大家如何使用Unity创建一个RPG游戏&#xff0c;玩家可以在城镇场景中进行导航并寻找战斗&#xff0c;并在战斗中遇到不同类型的敌人。玩家可以向敌人施加不同的动作&#xff0c;如&#xff1a;常规攻击和撤离。这会是一个十分有趣的体验。…

[next.js] svgr/webpack

nextjs如何配置svg文件&#xff0c;使其像react组件一样导入? 当前next.js 开发环境我使用了--turbo 来开启turbopack加速文件构建&#xff0c;所以之前的一些webpack loader之类的无法正常工作。通过搜索发现一般都是使用svgr/webpack来处理svg&#xff0c;打开svgr官网发现…