前端关于防抖和节流

Posted 2020-12-16 liuyuexue520

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端关于防抖和节流相关的知识，希望对你有一定的参考价值。

防抖

用户短时间内触发相同的网络请求, 我们限制请求次数, 减轻服务器之间的压力, 就叫防抖

举例来说: 某购物商城上面搜索框的智能提示, 用户输入东西之后, 会很快向服务器发送请求, 如果监听input事件而不做防抖操作,发送请求频率就会很频繁, 从而造成服务器压力过大

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防抖</title>
</head>

<body>
    <input type="text" id="ipt">

    <script>
        const ipt = document.querySelector("#ipt");

        ipt.addEventListener("input", ev => {
            debunceAjax(ev.target.value);
        })

        function ajax(val) {
            console.log(val);
        }

        let debunceAjax = debunce(ajax)

        function debunce(cb) {
            return function (val) {
                clearTimeout(cb.timer);
                cb.timer = setTimeout(() => {
                    cb(val)
                }, 1000)
            }
        }

    </script>
</body>

</html>

防抖的核心是通过定时器来添加延迟, 从而延迟网络请求的调用, 当用户短时间再次触发的时候 , 先清除该定时器 , 定时器如果时间没到 , 里面的网络请求就不会发送出去 , 随着清除定时器一起释放了 , 网络请求自然就减少了

节流

所谓的节流, 主要是游戏用的多, 例如英雄联盟平A补刀, 假设用户点 A 就会发送请求, 那么, 只要这个人手速够快, 一秒钟点个十来次A, 英雄是否就会A 10刀呢? 其实不然, 无论该用户点击 A 多频繁, 英雄都只会在一定间隔内攻击一次, 这就是节流操作

在相同的事件内, 当前事件触发后, 用户再次触发该事件, 就会失效, 直到设置的节流时间过 , 用户才能再次触发该事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button id="btn">节流使用</button>

    <script>
        const btn = document.querySelector("#btn");
        btn.onclick = () => {
            fnAjax()
        }

        const ajax = () => {
            console.log("123")
        }

        const fnAjax = fn(ajax, 2000)


        function fn(cb, delay) {
            cb.flag = true
            return function () {
                if (cb.flag) {
                    cb.flag = false;
                    setTimeout(() => {
                        cb()
                        cb.flag = true
                    }, delay)
                }
            }
        }


    </script>
</body>

</html>

节流的核心, 同样是通过定时器, 来延迟发送网络请求的时间 , 和防抖的区别在于, 节流是通过变量的布尔值来控制请求的时间间隔

以上是关于前端关于防抖和节流的主要内容，如果未能解决你的问题，请参考以下文章