防抖和节流的区别
防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
假设的运用场景
防抖:有一个验证码为60秒的时间,在这60秒内没点击一次就会重新从60秒重新计算,过了60秒才能触发执行。
节流:有一个验证码为60秒的时间,在这60秒内只能触发一次,重复点击也不会有任何反应,过来60秒才能触发执行。
这里是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button class="btn1">防抖:<text>点击</text> </button>
<button class="btn2">节流:<text>点击</text> </button>
<button onclick="btn3()" class="btn3">普通点击</button>
</div>
<p class="p1">防抖触发次数:<text>0</text> </p>
<p class="p2">节流触发次数:<text>0</text> </p>
<p class="p3">普通点击次数:<text>0</text> </p>
<script>
// 防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
// 节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次生效
// 假设时间为60秒一次
const btn1 = document.querySelector('.btn1')
const btn2 = document.querySelector('.btn2')
const btnt1 = document.querySelector('.btn1 text')
const btnt2 = document.querySelector('.btn2 text')
const p1t = document.querySelector('.p1 text')
const p2t = document.querySelector('.p2 text')
// console.log(btn1,btn2,btnt1,btnt2,p1t,p2t)
// 防抖
var time1 =60
var falg1 = true
btn1.onclick=function(){
if(falg1){
p1t.innerText=p1t.innerText*1+1
}else{
time1=60
return
}
var r=setInterval(()=>{
time1--
btnt1.innerText=time1
if(time1==0){
clearInterval(r)
time1=60
falg1=true
btnt1.innerText='点击'
}
},100)
falg1=false
}
// 节流
var time2 = 60
var falg2 =true
btn2.onclick=function(){
if(falg2){
p2t.innerText=p2t.innerText*1+1
}else{
return
}
var r =setInterval(()=>{
time2--
btnt2.innerText=time2
if(time2==0){
clearInterval(r)
falg2=true
btnt2.innerText='点击'
time2=60
}
},100)
falg2=false
}
// 普通事件
function btn3(){
var p3 = document.querySelector('.p3 text')
p3.innerText=p3.innerText*1+1
}
</script>
</body>
</html>
这里是效果图