项目小结嘞

小结嘞"/>

项目小结嘞

海绵仔，今天又是美好的一天呀

今天是项目考核完后的第二天，在昨天的全员找bug的考核形式下，让我总是压抑不住内心的笑意——低级错误，明明自己可能顺手就能解决的事情却还是拖到了考核的时候出现了，感叹自己愚蠢的同时，有感觉自己有着很大的干劲想快点完善自己的项目。

 所以今天想要分享的是在我项目中找到的痛点——点击时间的防抖

在写项目的时候肯定会遇到点击事件，普通的点击事件还好，但当我们遇到发送一类的点击事件就可能导致用户手快连续发送多条的情况

一开始我使用的是当用户点击按钮后对按钮进行禁用，直到倒计时结束后才可以重新获取

即

const btn = document.querySelector('.btn');
let time = 60;
btn.onclick = function(){
let time  = setInterval(function(){
if(time >0){
btn.disabled = true;
btn.innerHTML = '倒计时${time}...'
time --;
}else if(time == 0){btn.disabled = false;
btn.innerHTML = '重新开始';
time = 60;
})
}

但在实际操作中可能并不是那么的尽如人意，虽然在点击按钮后禁用，但这并不能阻止用户快速的手速，所以就找到另一种新方法

防抖

即在用户点击按钮后延迟执行点击按钮后的事件可以有效的解决上述问题，两者一起用，效果更佳哦

代码如下

//防抖函数
延迟时间为1s
let time = 60; 
function debounce(fn){
let timeId;return function(){timeId = setTimeout(()=>{fn();
},1000)
}
}
function getBind(){
let time  = setInterval(function(){
if(time >0){
btn.disabled = true;
btn.innerHTML = '倒计时${time}...'
time --;
}else if(time == 0){btn.disabled = false;
btn.innerHTML = '重新开始';
time = 60;
})
}
const debounceGetbind = debounce(getbind);

除了在点击事件上使用防抖事件外还可以在onresize和鼠标事件上使用可以很大程度上优化代码的可执行度以及处理器的损耗。

在向前看，就需要我不断找到自己的目标和方向了，马上就要进入大二了，要更加努力了嘞。