【前端小组件实现记载】基于cookie的验证码计时器-vue-js

在项目中需要使用到验证码功能时，点击获取验证码后，需要在一定的时间后才能再次获。，一般的使用的是普通的计时器，但是普通计时器会有一个缺陷：只要页面一刷新，就会重新计时，不能起到实际防止反复调用接口的作用。所以设计一个基于cookie的计时器，是很有必要的。

---

项目环境：

• vue-cli
• 插件：js-cookie
• 按钮样式：semantic-ui

拟实现的功能：

• 默认情况下，验证码按钮显示发送验证码

• 点击获取验证码，按钮禁用，出现倒计时效果
  
• 此时，刷新页面，倒计时效果不会消失，直到倒计时完成
• 倒计时结束，显示重新获取，按钮可以点击

具体与实现有关的代码：

• 按钮的html：

<button class="ui button" id="sendPicCode" type="button" @click="sendCode" >发送验证码button>

• 引入js-cookie：

//引入调用js-cookie
import cookie from 'js-cookie'

• sendcode方法中有关计时器的代码：

//倒计时60秒
this.LockButton('#sendPicCode', 60);

• methods中的LockButton方法：

LockButton: function (btnObjId, locksecends) {
     
	var freezeEndTime = cookie.get("freezeEndTime");
	//cookie不存在
	if (freezeEndTime == null || freezeEndTime == undefined || freezeEndTime == 'undefined' || freezeEndTime == 'null') {
     
		var now = new Date().getTime();  //当前时间戳
  		var endtime = locksecends * 1000 + now;  //结束时间戳
  		cookie.set("freezeEndTime", endtime);  //将结束时间保存到cookie
	}
	//按钮 禁用 并 显示倒计时
	$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text(  locksecends + 's');
	//开启计时器
    var timer = setInterval(function () {
     
		locksecends--;
		//显示倒计时
		$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text(  locksecends + 's');
		//倒计时结束
		if (locksecends <= 0) {
     
			//倒计时结束清除cookie值
			cookie.remove("freezeEndTime", null);
			//使按钮可用，并更改字样
			$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
            //关闭计时器
            clearInterval(timer);
		}
	 }, 1000); 
},

• vue的created方法中：

//读取cookie，如果存在cookie，且倒计时还未完成，继续完成倒计时
if (cookie.get("freezeEndTime") != undefined && !isNaN(cookie.get("freezeEndTime"))){
       
	//读取到了cookie值
	var freezeEndTime = cookie.get("freezeEndTime");
	var now = new Date().getTime();  //当前时间戳
	var locksecends = parseInt((freezeEndTime - now) / 1000);//计算剩余时间
	if (locksecends <= 0) {
     
		//倒计时已经结束，清除cookie
		cookie.set("freezeEndTime", null);
	} else {
     
		this.LockButton('#sendPicCode', locksecends)
	}   
}

• 细节：计时器里的文本显示也需要加上.addClass('disabled').attr('disabled', 'disabled').，原因是计时器开始后代码执行的情况是异步的，created方法完后，semantic渲染组件，又恢复成没有禁用的情况。所以需要在计时器里面进行再次添加禁用属性。

按上述步骤进行就能够实现所需的功能！

---