防抖节流笔记

性能优化----防抖 节流

防抖和节流都是为了控制函数的执行
防抖：控制函数多次触发只能执行最后一次
节流：控制执行次数，多次触发只执行一次

防抖

function debounce(fn){
let timer=null
return function(){
clearTimeout(timer)
timer=setTimeout(()=>{
// 改变this指向，使this指向目前所在标签
fn.call(this)
},1000)}
}

理解：当函数触发后会清除之前的定时器并新建新的定时器，使得定时器部分重新执行，当连续触发事件时，每触发一次定时器便新建一次，达到只执行最后一次的效果。

触发我就清除你，重新开始

节流

function throttle(fn){
let timeout
return function(){
if(!timeout){
timeout=setTimeout(()=>{
// 改变this指向，使this指向目前所在标签
fn.call(this)
timeout=null
},1000) }
}
}

理解：当函数触发后通过判断定时器是否存在来控制函数的执行，定时器中内容未执行完时timeout不为空，即无法再次触发定时器，只能等待定时器执行完只能，将timeout重置为空时，才能再次触发。

触发就触发，我就不搭理你

参考文章