项目笔记9（尚品汇）防抖与节流一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情

卡顿现象

在上一节实现了三级联动动态添加背景。但是当用户快速从上往下划的时候，会出现卡顿现象。如图所示，用户滑动速度很快，然而却发现输出的只有几个数据，而不是全部数据，这就是卡顿现象。在这里插入图片描述

函数防抖

定义：前面的所有的触发都被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发,只会执行最后一次为了使用防抖与节流的效果，首先引入lodash。可以从官网下载lodash.js文件，然后在自己的页面中通过如下代码引入。

<script src="lodash.js"></script>

通过下面的代码展示一下不使用防抖会产生什么效果。代码如下

<!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>
    <input type="text">
    <script>
        let input = document.querySelector('input')    
        input.oninput = function(){
            console.log('发送数据请求');
        }
    </script>
</body>
</html>

具体效果如下所示

在这里插入图片描述

通过实例可以发现，如果不引入防抖，当你输入一个字符的时候就会触发一次事件。在项目开发过程中会非常麻烦，会反复调用事件中的内容，降低性能。接下来演示一下引入防抖的效果（注意，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>
    <input type="text">
    <script>
        let input = document.querySelector('input')
        input.oninput = _.debounce(function(){
            console.log('发送数据请求');
        },5000)
    </script>
</body>
</html>

具体效果如下所示

在这里插入图片描述

可以发现，当引入防抖后，当用户输入完成后只调用了一次事件。大大节省了性能。

函数节流

定义：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发节流说白了和防抖的区别就是，节流对时间进行了限制，防抖对输入过程进行了限制。举例说明未引入节流的代码如下所示。

<!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>
    <input type="text">
    <script>
        let input = document.querySelector('input')
        input.oninput = function(){
            console.log('发送数据请求');
        }
    </script>
</body>
</html>

页面效果如下所示在这里插入图片描述

引入节流代码如下所示

<!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>
    <input type="text">
    <script>
        let input = document.querySelector('input')
        input.oninput = _.throttle(function(){
            console.log('发送数据请求');
        },1000)
    </script>
</body>
</html>

具体效果如下所示。

在这里插入图片描述

三级联动节流

在咱们自己的项目中，会发现本身存在lodash如下图所示。

在这里插入图片描述

因此如果想在三级联动组件中使用节流，可以直接通过import引入。首先找到三级联动组件，输入如下代码即可成功引入。为了验证是否成功引入，可以log输出一下看看。完整代码以及结果如下图所示。

import _ from "lodash"

在这里插入图片描述

通过上面的图片可以发现成功引入lodash。接下来开始设置节流。重新书写changeIndex方法。原来的方法和重写的方法如下所示。此时即为三级联动设置好了节流。

在这里插入图片描述