节流:在规定时间范围内不会重负触发回调,只有大于这个时间才能触发回调,把频繁触发变为少量触发
防抖:所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
简单的来说,防抖就是王者荣耀的回城,可以多次点击,但会重新计算,节流就是王者的技能,点完之后有冷却,就是规定时间只能点击一次,
防抖常用在搜索框关键字检索,不能输入一个数就发一次请求,太过与频繁,设置一个防抖,时间间隔设为一秒
<script>
let fangdou=document.querySelector("input")
let t=null;
fangdou.οninput=function(){
if(t!==null){
//t!=null先清除前边建的定时器
clearTimeout(t)
}
//再开一个定时器
t=setTimeout(()=>{
console.log(this.value)
},1000)
}
</script>
节流
<scrpit>
let flag=true;
window.οnscrοll=function(){//滚动
if(flag){ //为true执行
setTimeout(()=>{
console.log("123")
flag=true //定时器执行了就改为true,使得如果还在滚动的话还能继续打印
},5000)
}
flag=false //在每一个5秒后不再操作滚动条就会变为false
}
</script>
这俩函数都用了定时器,防抖就是新触发的时候清除定时器,节流就是等定时器执行完后,才能进行下一步