【前端小组件实现记载】基于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渲染组件，又恢复成没有禁用的情况。所以需要在计时器里面进行再次添加禁用属性。