JS自定义debounce函数实现防抖

发布时间：2023-12-12 14:20:29

本文字数：222 字 阅读完需：约 1 分钟

背景

有时候在实现输入框即时搜索时，根据输入的内容的变化调用接口获得搜索内容。但是如果不做防抖处理，会导致频繁调用后端接口，达不到理想的效果。当然，防抖可以用在其它很多方面。

代码实现

直接上代码

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

主要原理就是通过定义一个debounce里面使用timer变量存储一个定时器，这个函数返回一个新函数，当在定时器delay内重新调用debounce函数时，利用clearTimeout清除定时器，然后重新计时，达到防抖的效果。

Another way

更简单的方式是可以直接调用别人封装好的工具，安装 lodash-es 就可以直接使用debounce了，更加简洁方便。

import { debounce } from "lodash-es";