2024-08-17 深入JavaScript高级语法十四——手写防抖、节流、深拷贝、事件总线函数实现

最新推荐文章于 2025-05-29 11:29:09 发布

原创

最新推荐文章于 2025-05-29 11:29:09 发布 · 414 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

1、认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中

而 JavaScript 是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。

而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。

1.1、认识防抖 debounce 函数

我们用一副图来理解一下它的过程：

当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；

当事件密集触发时，函数的触发会被频繁的推迟；

只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

在这里插入图片描述

防抖的应用场景很多：

输入框中频繁的输入内容，搜索或者提交信息；

频繁的点击按钮，触发某个事件；

监听浏览器滚动事件，完成某些特定操作；

用户缩放浏览器的 resize 事件；

1.2、认识节流 throttle 函数

我们用一副图来理解一下节流的过程

当事件触发时，会执行这个事件的响应函数；

如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；

不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

在这里插入图片描述

节流的应用场景：

监听页面的滚动事件；

鼠标移动事件；

用户频繁点击按钮操作；

游戏中的一些设计；

1.3、节流函数的应用场景

很多人都玩过类似于飞机大战的游戏
在飞机大战的游戏中，我们按下空格会发射一个子弹：

很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；

比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；

但是事件是触发了10次的，响应的函数只触发了一次；

2、实现防抖函数

2.1、使用第三方库实现

事实上我们可以通过一些第三方库来实现防抖操作：

lodash

underscore

这里使用 underscore

我们可以理解成 lodash 是 underscore 的升级版，它更重量级，功能也更多；

但是目前我看到 underscore 还在维护， lodash 已经很久没有更新了；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title> 
</head>
<body>
    <input type="text">
    <button id="cancel">取消</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.7/underscore-umd.min.js"></script>
    <script>
        const inputDom = document.querySelector('input')
        let counter = 0
        const inputChange = function (event) {
     
     
            console.log(this, event);
            console.log(`发送了第${ 
       ++counter}次网络请求`);
            return 'input的返回值'
        }

        // 防抖
        inputDom.oninput = _.debounce(inputChange, 2000)

        // 节流
        // inputDom.oninput = _.throttle(inputChange, 2000)
    </script>
</body>
</html>

2.2、手动实现

html代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./01-防抖函数.js"></script>
</head>
<body>
    <input type="text">
    <script>
        const inputDom = document.querySelector('input')
        let counter = 0
        const inputChange = function(event) {
     
     
            console.log(this, event);
            console.log(`发送了第${ 
       ++counter}次网络请求`);
        }
        inputDom.oninput = debounce(inputChange, 2000)
    </script>
</body>
</html>

2.2.1、最基本的防抖函数

function debounce(fn, delay) {
   
   
    // 1.定义一个定时器，保存上一次的定时器
    let timer = null
    // 2.真正执行的函数
    const _debounce = function() {
   
   
        // 取消上一次的定时器
        if(timer) {
   
   
            clearTimeout(timer)
            timer = null
        }
        // 延迟执行
        timer = setTimeout(() => {
   
   
            // 外部传入的真正要执行的函数
            fn()
        }, delay)
    }
    return _debounce
}