JS+Jquery实现短信倒计时效果

前言

最近在项目中用到了发送短信这一功能，于是就想着模仿一下发送短信倒计时的功能。

代码

可以看到我们的发送验证码的按钮是个a标签。

这里主要用jq选择元素，用js的setInterval()方法做定时器。用clearInterval()结束这个定时任务。
使用方法：setInterval(function，millisec)，两个参数都是必须的，第一个参数为要调用的函数或要执行的代码串。第二个参数为周期性执行或调用 function 之间的时间间隔，以毫秒计。

clearInterval(id_of_setinterval)，参数是必须的，为setInterval返回的ID值

这里需要注意的就是clearInterval需要的参数就是setinterval的id，你可以用一个变量接收
setInterval(function，millisec)

	//发送验证码
	$(function(){
		$("#sendCode").click(function(){
			//1. 给指定的手机发送验证码
			//2. 倒计时
			if ($("#sendCode").hasClass("disable")) {
				alert("你点击的频率过于频繁,请稍后重试")
			}else{
				countDown();
			}
		});
	})

	//倒计时功能
	function countDown(){
		var time = 60;
		//消抖，防止用户多次点击发送短信按钮造成读秒过快情况
		$("#sendCode").attr("class", "disable");
		let interval = setInterval(()=>{
			if ( time==0 ){
				clearInterval(interval);
				$("#sendCode").text("发送验证码");
				$("#sendCode").removeClass("disable")
			}else{
				$("#sendCode").text(`${time--}s 后重新发送短信`);
			}
		}, 1000);

效果

点击发送短信后，进入倒计时状态，当为0s时，恢复初始状态。

这里需要注意的是,如果我在倒计时状态点击了两次发送验证码，会出现秒数变快并且闪烁的状态，所以我们上面的代码用了一个标志位，其实就是加了一个class来让它不能点击多次。