手写防抖和节流函数实现

作者: yyds花生 | 来源:发表于2022-04-09 20:20 被阅读0次

手写代码系列（持续更新）
手写防抖函数 debounce 和节流函数 throttle
前端性能优化：手写实现节流防抖
手写防抖和节流函数实现
前端面试中常见手写函数（包括排序算法）
JS实现节流函数,防抖函数
Javascript 基础
前端手写
2019年一些前端的面试题（含答案）2.0
函数节流与函数防抖

1. 认识防抖和节流函数

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

而JavaScript是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；
防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。 n

但是很多前端开发者面对这两个功能，有点摸不着头脑：
a. 某些开发者根本无法区分防抖和节流有什么区别（面试经常会被问到）；
b. 某些开发者可以区分，但是不知道如何应用；
c. 某些开发者会通过一些第三方库来使用，但是不知道内部原理，更不会编写；

接下来我们会一起来学习防抖和节流函数：

我们不仅仅要区分清楚防抖和节流两者的区别，也要明白在实际工作中哪些场景会用到；
并且我会带着大家一点点来编写一个自己的防抖和节流的函数，不仅理解原理，也学会自己来编写；

2. 认识防抖debounce函数

「在事件被触发n秒后再执行回调，如果再这n秒内又被触发，则重新计算」

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

当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
当事件密集触发时，函数的触发会被频繁的推迟;
只有等待了一段时间也没有事件触发，才会真正的执行响应函数;

防抖的应用场景很多：

Ø 输入框中频繁的输入内容，搜索或者提交信息；
Ø 频繁的点击按钮，触发某个事件；
Ø 监听浏览器滚动事件，完成某些特定操作；
Ø 用户缩放浏览器的resize事件；

防抖函数的案例

我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容

比如想要搜索一个MacBook：

当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要
一次网络请求；
当继续输入ma时，再次发送网络请求；
那么macbook一共需要发送7次网络请求；
这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

image.png

但是我们需要这么多次的网络请求吗？

不需要，正确的做法应该是在合适的情况下再发送网络请求；
比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

案例准备

我们通过一个搜索框来延迟防抖函数的实现过程：
p 监听input的输入，通过打印模拟网络请求
n 测试发现快速输入一个macbook共发送了7次请求，显示我们需要对它进行防抖操作：

基本实现

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script src="debounce.js"></script>
    <script>
        const inputEl = document.querySelector("input");
        let counter = 0;
        const inputChange = function() {
            console.log(`发送了第 ${++counter}次网络请求`);
        }

        // 防抖处理
        inputEl.oninput = debounce(inputChange, 2000)
    </script>
</body>
</html>

js
/**
 * 防抖函数
 * @param {fn} fn 外部传入的函数
 * @param {number} delay 延迟的时间
 * @returns 
 */
function debounce (fn, delay) {
    // 定义一个定时器， 保存上一次的定时器
    let time = null;
    // 真正执行的函数
    const _debounce = function (...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer);
        // 延迟执行
        timer = setTimeout(() => {
            // 外部传入的真正要执行的函数 矫正this的指向
            fn.apply(this, args);
        }, delay)
    }
    return _debounce
}

立即执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script src="debounce.js"></script>
    <script>
        const inputEl = document.querySelector("input");
        let counter = 0;
        const inputChange = function() {
            console.log(`发送了第 ${++counter}次网络请求`);
        }

        // 防抖处理
        inputEl.oninput = debounce(inputChange, 2000, true)
    </script>
</body>
</html>



/**
 * 防抖函数
 * @param {fn} fn 外部传入的函数
 * @param {number} delay 延迟的时间
 * @returns 
 */
function debounce (fn, delay, immediate=false) {
    // 定义一个定时器， 保存上一次的定时器
    let timer = null;
    // 是否立即执行
    let isInvoke = false;

    // 真正执行的函数
    const _debounce = function (...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer);
        // 判断是否需要立即执行
        if (immediate && !isInvoke) {
            // 立即执行
            fn.apply(this, args);
            isInvoke = true;
        } else {
            // 延迟执行
            timer = setTimeout(() => {
                // 外部传入的真正要执行的函数 矫正this的指向
                fn.apply(this, args);
                isInvoke = false;
            }, delay)
        }
        
    }
    return _debounce
}

增加取消功能

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <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="debounce.js"></script>
   <script>
       const inputEl = document.querySelector("input");
       let counter = 0;
       const inputChange = function() {
           console.log(`发送了第 ${++counter}次网络请求`);
       }

       // 防抖处理
       const debounceChange = debounce(inputChange, 2000);
       inputEl.oninput = debounceChange
       // 取消功能
       const cancelBtn = document.querySelector("#cancel");
       cancelBtn.onclick = function () {
           debounceChange.cancel();
       }
   </script>
</body>
</html>

/**
 * 防抖函数
 * @param {fn} fn 外部传入的函数
 * @param {number} delay 延迟的时间
 * @returns 
 */
function debounce (fn, delay, immediate=false) {
    // 定义一个定时器， 保存上一次的定时器
    let timer = null;
    // 是否立即执行
    let isInvoke = false;

    // 真正执行的函数
    const _debounce = function (...args) {
        // 取消上一次的定时器
        if (timer) clearTimeout(timer);
        // 判断是否需要立即执行
        if (immediate && !isInvoke) {
            // 立即执行
            fn.apply(this, args);
            isInvoke = true;
        } else {
            // 延迟执行
            timer = setTimeout(() => {
                // 外部传入的真正要执行的函数 矫正this的指向
                fn.apply(this, args);
                isInvoke = false;
                timer = null;
            }, delay)
        }
        
    }
    // 封装取消功能
    _debounce.cancel = function() {
        if (timer) clearTimeout(timer);
        timer = null;
        isInvoke = false;
    }
    return _debounce
}

效果

image.png

节流函数

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效

节流的实现过程

image.png
基本的封装

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

function throttle (fn, interval=2000) {
        // 记录上一次的开始的时间
        let lastTime = 0;
        // 时间触发时，真正执行的函数
        const _throttle = function () {
            // 获取当前事件触发时的时间
            const nowTime = new Date().getTime();
            // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间， 计算出还剩余多长事件需要去触发函数
            const remainTime = interval - (nowTime - lastTime)
            if(remainTime <= 0) {
                // 真正触发函数
                fn();
                // 保留上次触发的时间
                lastTime = nowTime;
            }
        }
    return _throttle
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="throttle.js"></script>
</head>
<body>
    <input type="text">
    <script>
        const inputEl = document.querySelector('input')
        let counter = 0;
        const inputChange = function (event) {
            console.log(`发送了第${++counter}次网络请求`, this, event);
        }
        inputEl.oninput = throttle(inputChange, 2000, { leading: false });      
    </script>
</body>
</html>

// leading表示首次是否触发
function throttle (fn, interval=2000, options={ leading: true, trailing: false}) {
        const {leading, trailing} = options
        // 记录上一次的开始的时间
        let lastTime = 0;
        // 时间触发时，真正执行的函数
        const _throttle = function () {
            // 获取当前事件触发时的时间
            const nowTime = new Date().getTime();
            // 当最后的时候和当前时间相等的时候(第一次没有触发)
            if (!lastTime && !leading) lastTime = nowTime
            // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间， 计算出还剩余多长事件需要去触发函数
            const remainTime = interval - (nowTime - lastTime)
            if(remainTime <= 0) {
                // 真正触发函数
                fn();
                // 保留上次触发的时间
                lastTime = nowTime;
            }
        }
    return _throttle
}

完善节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="throttle.js"></script>
</head>
<body>
    <input type="text">
    <script>
        const inputEl = document.querySelector('input')
        let counter = 0;
        const inputChange = function (event) {
            console.log(`发送了第${++counter}次网络请求`, this, event);
        }
        inputEl.oninput = throttle(inputChange, 2000, { leading: false });      
    </script>
</body>
</html>

function throttle (fn, interval=2000, options={ leading: true, trailing: false}) {
        const {leading, trailing} = options
        // 记录上一次的开始的时间
        let lastTime = 0;
        let timer = null;
        // 时间触发时，真正执行的函数
        const _throttle = function () {
            // 获取当前事件触发时的时间
            const nowTime = new Date().getTime();
            // 当最后的时候和当前时间相等的时候(第一次没有触发)
            if (!lastTime && !leading) lastTime = nowTime
            // 使用当前触发的时间和之前的时间间隔以及上一次开始的时间， 计算出还剩余多长事件需要去触发函数
            const remainTime = interval - (nowTime - lastTime)
            if(remainTime <= 0) {
                if (timer) {
                    clearTimeout(timer);
                    timer = null;
                }
                // 真正触发函数
                fn();
                // 保留上次触发的时间
                lastTime = nowTime;
                // 没有加定时器的时候直接return掉
                return;
            }
            // 只需要有一个定时器即可
            if (trailing && !timer) {
                timer = setTimeout(() => {
                    timer = null;
                    // 仅仅执行一次
                    lastTime = !leading ? 0 : new Date().getTime();
                    fn();
                }, remainTime);
            }
        }
    return _throttle
}

image.png

：

手写代码系列（持续更新）
1、手写instanceOf的实现原理 2、手写节流和防抖函数 2.1 节流函数节流函数原理:规定在一个单位时间...
手写防抖函数 debounce 和节流函数 throttle
手写防抖函数 debounce 和节流函数 throttle 本文参考：深入浅出节流函数 throttle深入浅出...
前端性能优化：手写实现节流防抖
前端性能优化：手写实现节流防抖本文首发于前端性能优化：手写实现节流防抖[https://gitee.com/r...
手写防抖和节流函数实现
1. 认识防抖和节流函数防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流...
前端面试中常见手写函数（包括排序算法）
手写ajax 手写bind函数手写防抖、节流函数防抖：简单说就是一开始不会触发，停下来多长时间才会触发，典型案...
JS实现节流函数,防抖函数
节流函数（throttling fountion）和防抖函数（debouncing fountion）都是为了实现...
Javascript 基础
1、函数防抖和函数节流【《javascript高级程序设计》里，函数节流是这里讲的函数防抖。】函数防抖：在事件...
前端手写
节流防抖用xhr手写axios 函数柯里化手写promise 手写reduce new 深拷贝 string...
2019年一些前端的面试题（含答案）2.0
上一篇链接：2019年一些前端的面试题（含答案） 7、手写函数防抖和函数节流函数节流函数节流是让这个函数在间隔...
函数节流与函数防抖
函数节流与函数防抖的区别JS魔法堂：函数节流（throttle）与函数去抖（debounce）函数的防抖与节流自...