防抖与节流

网上的资料有很多，我这里相当于是个记录，方便自己复习

防抖

防抖的需求

• 频繁触发
• 耗时操作
• 只关心最后一次触发
  持续触发输入事件时，不立即执行func函数，而是在指定时间delay中没有再次触发事件时，才会进行延时执行func函数，也就是在最后一次操作才执行函数。

实现原理

如何确定是最后一次操作？
在指定时间内没有事件再触发
实现方法
设置一个定时器和一段延时时间，只要在延迟时间内不断地触发这个事件，就把前面面的定时器清除，只保留最后一个定时器的执行

代码

function debounce(fn,delay){
    let t = null
    if(t){
        clearTimeout()
    }
    return funciton(...args){
        t=setTimeout(()=>{
            fn.apply(this,args)
        },delay)
    }
}

节流

节流的要求

• 频繁触发
• 耗时操作
• 按照一定的频率来执行函数
  在持续进行触发输入事件时，不立即执行func的函数请求，而是每隔指定的delay时间后才会执行一次func函数

实现原理

如何实现每隔指定的delay时间后才会执行一次？ 判断触发的时间是否在时间间隔内
实现方法
设置一个执行标志，在定时器里改变这个标志，使得间隔时间执行
代码

funtion throttle(fn,delay){
    let t = true;
    return function(...args){
        if(t){
            setTimeout(()=>{
                fn.apply(this,args)   
                t=true
            },delay)
        }
        t=false
    }
}

参考资料

JS手写题-防抖-节流 - 掘金 (juejin.cn)
【前端】一网打尽──前端必会的“防抖”和“节流”方法 - 掘金 (juejin.cn)
几分钟，学会JS防抖和节流，手写节流函数～_哔哩哔哩_bilibili
几分钟，带你学会什么是JS防抖，手写防抖函数～_哔哩哔哩_bilibili
JavaScript 防抖 - Web前端工程师面试题讲解_哔哩哔哩_bilibili
前端面试题：防抖与节流（一）_哔哩哔哩_bilibili
高阶函数应用-函数防抖【渡一教育】_哔哩哔哩_bilibili