JS-手写防抖函数解析

直接贴上代码

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

下面是html的代码,很简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
</body>
<script src="./防抖.js"></script>
<script>

    const inputEl = document.querySelector('input')
    let count = 0
    const inputChange = function (event) {
        console.log(`点击了${++count}次`,this,event)
    }

    inputEl.oninput = debounce(inputChange,1000)
</script>
</html>

html中的代码不必多说

分析一下js代码中的debounce函数

注意一点: inputEl.oninput = debounce(inputChange,1000) , 这段代码,实际是将debounce()的返回值赋值给了inputEl.oninput,因此它会在立刻执行一次,后续input中的value变化时会使触发赋值给inputEl.oninput 的函数,即debounce的返回值

1.定义一个函数debounce,用来侦听某一个需要进行防抖的函数,以及防抖频率

2.先略过 timer 相关的代码

3.直接看return function 这一部分,...args是剩余参数,用来存放原函数的参数

4.执行setTimeout,对传入的函数进行延迟处理,延迟的时长就是的debounce的第二个参数

5.由于默认绑定,直接执行会让fn的this指向window,所以需要给它绑定this,return function中的this即是外层的this,就是调用传入的函数的this

6.再看timer,由于防抖的概念,传入的函数重复触发事件在规定时间内不能连续执行,因此在setTimeout执行前,需要判断之前是否有函数在队列中等待延迟执行,如果有,就清空setTimeout

7.如何做到呢,其实有一个函数: clearTimeout,它可以做到,只需要传入setTimeout的返回值,就可以取消指定的setTimeout的执行,

8.而为了防止函数执行完被销毁,所以用到了闭包,避免内存回收,这样每次在下一次调用时,timer的值都不会被清空

9.完成