Js中的防抖与节流函数

1.何为防抖与节流函数呢？

1.防抖（debounce）：通过setTimeout方式，在一定的时间间隔内，将多次触发的事件转化为一次触发。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次

举例：当用户在进行表单提交时，用户提交一次就向服务器发送一次请求，当用户频繁地点击提交，则很自然地就向服务器多次请求，则会对服务器压力很大，那我们就需要想办法解决这种问题

2.节流（throuttle）：当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
举例：当我们打游戏的时候长按某个按键，动作是有规律的在间隔时间触发一次

#1.先来看一个没有经过任何处理的demo

由上图可以知道当我们每点击一次控制台就输出一次，这实际上在现实项目中是很浪费资源的

2.来看一下经过防抖函数包装之后的代码

<!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" name="" id="">
    <input type="submit" value="提交" id="input">
    <script>
        const input = document.querySelector('#input');
        // input.addEventListener('click', sumbit);
        input.addEventListener('click', debounce(sumbit, 2000));

        function sumbit(e) {
            console.log('点击');
            // console.log(this);
            // console.log(e);

        };
        //第一次点击立即执行，第二次之后就启用防抖函数
        function debounce(func, delay) {
            let timer = null;
            return function(...args) {
                let firtClick = !timer;
                if (timer) {
                    clearTimeout(timer)
                }
                if (firtClick) {
                    func.apply(this, args)
                }
                timer = setTimeout(() => {
                    timer = null
                }, delay)
            }
        }
    </script>
</body>

</html>

效果图如下：

3.来看一下经过节流函数包装之后的代码

代码如下：

<!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" name="" id="">
    <input type="submit" value="提交" id="input">
    <script>
        const input = document.querySelector('#input');
        // input.addEventListener('click', sumbit);
        input.addEventListener('click', throuttle(sumbit, 2000));

        function sumbit(e) {
            console.log('点击');
            // console.log(this);
            console.log(e);

        };

        function throuttle(func, delay) {
            let begin = 0;
            return function() {
                let currenttime = new Date().getTime();
                console.log(currenttime - begin);
                if (currenttime - begin > delay) {
                    func.apply(this, arguments)
                    begin = currenttime;
                }
            }
        }
    </script>
</body>

</html>

效果图如下：

4.总结：1.防抖和节流都是为了解决频繁触发某个事件的情况造成的性能消耗

　　　　2.防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

参考连接：https://www.bilibili.com/video/BV1Vy4y1y7tj?p=3&share_source=copy_web

Js中的防抖与节流函数

推荐阅读