JavaScript防抖和节流

JavaScript防抖和节流

问题还原

我们先来通过代码把常见的问题还原:

<html>
<head>
    <meta charset="utf-8">
    <title>问题演示</title>
</head>
<body>


    <script type="text/javascript">
        window.onload = function(){
            // 没有处理防抖和节流的代码
            let norInput = document.getElementById('normal');
            
            let ajax = content=>{
                console.log('ajax:' + content);
            }

            norInput.addEventListener('keyup',e=>{
                ajax(e.target.value)
            })
            // console.log(debounce()())
        }
    </script>

    <input type="text" name="normal" id="normal">

</body>
</html>

在上面的程序中，看上去是没有什么问题，但是用户每输入一个字符，都会向后端发起一次请求，而这只是一个用户，如果同时很多用户进行相同的操作，无异于是给服务端造成极大的压力。

而解决这种问题，有很多种合适的方法，但是下文要说到的，是关于JavaScript当中的防抖和节流操作。

防抖

什么是防抖

当用户在触发一次事件n秒后在执行回调函数，如果重复触发则进行重新计时。

根据防抖的逻辑，下面通过代码来进行模拟：

<html>
<head>
    <meta charset="utf-8">
    <title>问题演示</title>
</head>
<body>


    <script type="text/javascript">
        window.onload = function(){
            
            let norInput = document.getElementById('normal');
            // 创建一个函数模拟ajax请求
            let ajax = content=>{
                console.log('ajax:' + content);
            }

            // 创建防抖函数
            let debounce = (fn,delay) => {
                return function(args){
                    let that = this;
                    let param = args;
                    // 每次事件触发 清除当前的timmer 然后重写调用
                    clearTimeout(fn.id);
                    fn.id = setTimeout(function(){
                        fn.call(that,param)
                    },delay)
                }
            }

            let deb_func = debounce(ajax,500)
            norInput.addEventListener('keyup',e=>{
                deb_func(e.target.value)
            })
            
        }
    </script>

    <input type="text" name="normal" id="normal">

</body>
</html>

上面的demo运行后，你会发下，用户如果停止输入后的一段时间才会发起ajax请求，而如果用户持续输入，则计时器会不断的刷新，再这个过程中并不会发生请求，直到用户停止输入，才会开始计时，时间一到，才会发送请求。

这样就能够有效的减少因为频繁发送请求给服务器带来过大的压力。

使用场景

resize 事件或者scroll事件等，可以通过防抖减少触发次数
用户在输入框中频繁输入

节流

什么是节流

设置一个时间范围，在一定的时间范围内，仅允许执行一次执行一次事件的回调函数，也就是说只要在规定时间范围内，无论事件触发几次，都只能执行一次回调函数。

我们通过click事件来还原下事故现场:

<html>
<head>
    <meta charset="utf-8">
    <title>节流</title>
</head>
<body>

<input type="button" id="btn" value="点击">
<script type="text/javascript">

let oBtn = document.getElementById('btn');

let ajax = ()=>{
    console.log("ajax发送请求")
}

oBtn.addEventListener('click',()=>{
    ajax();
})

</script>
</body>
</html>

当用户每一次点击后，都会发送一次请求，点击不断，请求不断。如同生命不息，战斗不止。可想而知，一旦有人无聊的一直点击，那么请求次数将会变得很可观。

下面是我们根据节流的原理来实现的示例代码:

<html>
<head>
    <meta charset="utf-8">
    <title>问题演示</title>
</head>
<body>


    <script type="text/javascript">
        window.onload = function(){
            // 获取元素 
            let oBtn = document.getElementById('normal');

            // 模拟ajax请求
            let ajax = ()=>{
                console.log("ajax发送请求....")
            }

            // 节流函数
            let throttle = (func,wait) =>{
                var timeout ;
                var previous = 0;

                return function(){
                    var _this = this;
                    args = arguments;
                    if(!timeout){
                        timeout = setTimeout(function(){
                            timeout = null;
                            func.apply(_this,args);
                        },wait)
                    }
                }
            }
            let thro_func = throttle(ajax,3000);


            // 绑定事件  
            oBtn.addEventListener('click',()=>{
                thro_func();
            })
        }
    </script>

    <input type="button" name="normal" id="normal" value="点击">

</body>
</html>

通过上面的案例，我们可以做到，当用户点击一次后，计时器开始，这当中无论发生几次事件触发，都仅仅会执行一次回调。

当然，想要实现节流的方法不止使用定时器这一种方案，还可以选择使用时间戳，再或者其他方法也不是不行，本文的目的仅仅是为了阐述和说明节流和防抖这两种减少服务器压力的方法而已。

使用场景

鼠标不断点击的情况
页面无限加载，每隔一段时间发起请求而不是用户停止滚动发起请求
...

原文地址：https://www.cnblogs.com/liujunhang/p/11405851.html

来聊聊JavaScript中的防抖和节流

JavaScript防抖和节流

问题还原

防抖

什么是防抖

使用场景

节流

什么是节流

使用场景