JavaScript --- 防抖与节流

引言：不管是面试中还是实际应用，防抖与节流都是我们比不可少的一门技能

防抖例如？

• 假如不操作电脑十分钟后，会触发熄屏函数，然后电脑会熄屏，但是我们如果在十分钟内操作了电脑，将会重新计时十分钟
• 假如轮播图每过五秒会自动翻页，但是当我们手动点击翻页时，会重新计时五秒，防止突然跳两页的奇怪情况发生

节流例如？

• 许多网站当页面滚动到一定距离，会出现回到顶部的按钮，节流可以帮助我们减少触发滚动事件的次数
• 提交按钮的时候，仍有部分人喜欢狂点按钮，节流可以让其不管点击多少次，在一定时间内只能生效一次

防抖的经典实现

防抖函数常用于DOM事件中

function debounce(fn, delay) {
    //1. 点击触发的函数是debouce函数的返回值
    let timeout = null
    return function() {
    //2. 也就是这个函数
        clearTimeout(timeout)
        timeout = setTimeout(() => {
    //再次触发就重新计时
            fn()
        }, delay)
    }
}
//测试
function fn() {
   
    console.log('静止了1s')
}
window.onmousemove = debounce(fn, 1000)

鼠标静止1s后触发函数：

节流的经典实现

function throttle(fn, delay) {