防抖、节流的相关知识

最新推荐文章于 2024-10-18 17:51:23 发布

Achong_0427

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量171

点赞数

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_71479134/article/details/131850117

版权

文章介绍了JavaScript中防抖和节流的概念及其区别，防抖用于过滤高频事件的重复执行，如登录按钮点击，而节流则限制事件的执行频率，如滚动事件。文中提供了防抖和节流的实现示例，并讨论了它们在优化性能和减少服务器请求上的应用。

摘要由CSDN通过智能技术生成

防抖

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

防抖最大的作用是过滤掉一些无效的请求，减少服务器的请求压力。

防抖，顾名思义就是防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会触接到的防抖操作。

在JS这个世界中，有哪些防抖的场景呢？

1、登录、发短信等按钮避免用户点击太快，以致与发送了多次请求，需要防抖。

2、调整浏览器窗口大小时，resize次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。

3、文本编辑实时保存，当无任何操作一秒后进行保存。

防抖的处理：通过用lodash函数一行就搞定。

通过防抖原理来防抖：

//防抖原理：
        function debounce(func, wait) {
            let timeout; //外部局部变量
            return function () {
                if (timeout) {
                    clearTimeout(timeout);//去掉之前的无效任务
                }
                //创建新的任务
                timeout = setTimeout(()=>{
                    func.apply(this, arguments);
                }, wait);
            }
        }
        search.onkeyup = debounce(count, 2000)

节流

节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

节流，顾名思义就是控制水的流量，控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务器及网关控制的限流类似。

在JS这个世界中，有哪些节流的场景呢？

1、scroll事件，每隔一秒计算一次位置信息等。

2、浏览器播放事件，每隔一秒计算一次进度信息等。

3、Input框实时搜索并发送请求展示下拉列表，每隔一秒发送一次请求（也可做防抖）

节流的处理：通过用lodash函数一行就搞定。

通过节流原理来节流：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <style>
        #content {
            width: 80%;
            margin: 0 auto;
            height: 30px;
            background-color: greenyellow;
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <script>
        let num = 1
        function count() {
            console.log("开始发送请求");
            content.innerHTML = num++
        }
        let content = document.querySelector("#content")

        //throttle节流：总是在2s后才执行一次
        function throttle(func,wait) {
            let timeout;
            return function () {
                if (!timeout) {
                    timeout = setTimeout(()=>{
                        timeout = null;
                        func();
                    }, wait)
                }
            }
        }
        content.onclick = _.throttle(count, 2000)
    </script>
</body>

</html>

还可以用时间戳来节流：