手写JS防抖函数、节流函数

一、防抖函数

理解： 当持续触发事件，一定时间内没有再触发事件，事件处理函数才会执行一次；如果在设定的时间到来之前又一次触发了事件，就会重新开始计算延迟时间

使用场景：输入搜索、改变浏览器宽度重新渲染等

实现代码：

function debounce(fn, delay) {

    let timer;

    // 使用闭包，使得timer存在内存中，可以保留数据，不然每执行一次都会创建一个新的timer，依旧会执行N次的fn

    return function () {

        clearTimeout(timer) //清掉还没结束的定时器

        timer = setTimeout(() => {

            fn.call(this,arguments) // 执行相关操作

        }, delay) //重新开始定时器

    }

}

ps: 前端小白，如有错误请指出喔~,感恩

二、节流函数

理解：当持续触发事件的时候，保证一段时间内只调用一次事件处理函数，即一段时间内只做一件事

使用场景：表单提交（鼠标不断点击触发）

实现代码：

function throttle(fn, wait) {

    let timer;

    // 使用闭包，使得timer存在内存中，可以保留数据，不然每执行一次都会创建一个新的timer，依旧会执行N次的fn

    return function () {

        // 当前存在定时任务，不创建新的定时任务，等待已有定时任务执行（节流函数：一定时间内只执行一次）

        if (!timer) {

            timer = setTimeout(() => {

                fn.call(this,arguments) // 执行相关操作

                timer = null //将定时器置空

            }, await);

        }

    }
}

ps: 前端小白，如有错误请指出喔~, 感恩