函数防抖与节流

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. 总结

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

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

相关阅读:
初识 React：安装和初步使用指南
分布式文件系统HDFS-2
SQL面试题之按照指定顺序进行多行转一列
python在NumPy数组中查找等于零的元素索引
Linux下实现U盘的挂载，复制文件和卸载等操作
阅读Skeleton.css源码，改善睡眠质量（尽管它只有419行代码）
基于单片机的北斗定位无人机救火系统（两种程序：单片机与android系统app程序源码）
华为云云耀云服务器L实例评测｜实例场景体验之搭建接口服务：通过华为云云耀云服务器构建 API 服务
C++标准模板（STL）- 类型支持（运行时类型识别，bad_typeid，bad_cast ）
react数据管理之setState与Props

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