首先我们来说说为什么要防抖节流,什么条件下用?怎么用?
通常面试的时候也会问到,这是基础,大家牢记了
防抖和节流应该属于性能优化方面的知识,但实际上遇到的频率相当高,平时应该也会经常用到,比如项目里的一些登录呀,增删改呀,使用次数比较多的
防抖:
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
防抖函数分为非立即执行版和立即执行版。
非立即执行版:
非立即执行版的意思是触发事件后函数不会立即执行,而是在 n 秒后执行,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
立即执行版
立即执行版的意思是触发事件后函数会立即执行,然后 n 秒内不触发事件才能继续执行函数的效果。
节流
if(canClick){
canClick = false;
callback()
setTimeout(function(){
canClick = true;
},2000)
}else{
console.log('两秒之内限制重复点击')
}
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。
对于节流,一般有两种方式可以实现,分别是时间戳版和定时器版。