函数防抖与节流

1. 卡顿现象

如果事件触发非常频繁就会出现卡顿，因为每一次触发，回调函数都要去执行(如果时间很短，而回调函数内部有计算，那么很可能会出现浏览器卡顿)

正常情况(用户拖动鼠标慢慢移动)：鼠标进入，每个一级分类都会触发鼠标进入事件

非正常情况下(用户操作很快)：本身全部的一级分类都应该触发鼠标进入事件，但是经过测试可以发现只有部分一级分类触发了

原因分析：就是用户行为过快，时间太短，没有给浏览器解析器留下充裕的时间，导致浏览器反应不过来，如果当前回调函数中有大量业务，有可能出现卡顿现象

请添加图片描述

2.函数防抖的理解

防抖：前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果快速连续的触发，只会执行一次

产生抖动

请添加图片描述

使用lodash消除抖动

请添加图片描述

<!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="./lodash.js"></script>
</head>
<body>
    <p>
        请输入搜索的内容：<input type="text">
    </p>
    <script>
        // 防抖：前面所有的触发都被取消，最后一次执行在规定的时间之后才会触发，
        // 也就是说如果快速连续的触发，只会执行一次
        let input = document.querySelector("input");

        // 未进行函数防抖
        // 文本发生变化立即执行
        // input.oninput = function(){
        //     console.log("发送ajax请求")
        // }

        /**
         * lodash插件：里面封装函数的防抖与节流(都用到了闭包和延时器)
         * lodash函数库对外暴露_函数
         * 
         */ 
        // 使用lodash进行函数防抖
        // console.log(_)
        input.oninput = _.debounce(function(){
            console.log("发送ajax请求")
        }, 1000);
        
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

3.函数节流的理解

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发

未节流的情况，点击多少次，就触发多少次

请添加图片描述

使用lodash中的throttle函数进行节流
在固定时间内无论点击多少次，就只运行一次

请添加图片描述

4. 总结

防抖：用户操作很频繁，但是只在最后执行一次

节流：用户操作很频繁，但是把频繁的操作变为少量的操作(可以给浏览器充裕的时间解析代码)

相关阅读:
C++学习day1
代理IP端口是什么意思呢？
前端跨界面之间的通信解决方案
Xmake v2.7.3 发布，包组件和 C++ 模块增量构建支持
Golang代码漏洞扫描工具介绍——trivy
基于Dockerfile创建镜像
Redis到底是单线程还是多线程
学生python编程----飞机训练
001数据安全传输-多端协议传输平台：Openssl安装和配置 - EVP代码测试
走进Oracle世界

原文地址：https://blog.csdn.net/cjhxydream/article/details/126267943