防抖及其优化

文章目录

防抖
缺点
优化--闭包

防抖

什么是防抖

防抖就是在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时

源代码（未实现防抖）

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>Documenttitle>
head>
<style>

style>

<body>
    <div >
       <input type="text" class="input">
    div>
body>
<script>
        let input=document.querySelector('.input');
        // input 元素获取用户输入时触发
        input.addEventListener('input',function()
        {
            console.log(this.value)
        })

script>

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

结果

在这里插入图片描述
由此可见在我们输入的过程中，input事件一直在触发，控制台也一直在打印，这样就会大大影响性能。

采用防抖解决

思想：用户触发时间过于频繁,只要最后一次请求的操作
实现：设置特定的时间，在特定时间后去获取输入的值，来减少频繁的操作

代码实现

  let input=document.querySelector('.input');
       // 设置一个标准,用来控制事件的触发
        let temp=null;
         // input 元素获取用户输入时触发
        input.addEventListener('input',function()
        {
            //如果不为空，重新计时
            // 就是当你不停的输入的时候就不断地刷新计时
            if(temp !== null){
                clearTimeout(temp);
            }
            //当你有0.5秒没有输入的时候就把你输入的打印出来
            temp = setTimeout(() => {
                console.log(this.value);
            },500)
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

结果

在这里插入图片描述
相比较之前没有进行防抖的时候，它触发的次数会减少很多

缺点

定义了一个新的全局变量temp会造成各种各样的缺点，而且防抖的代码和原本操作的代码混在一起，不易于后期维护。

优化–闭包

  let input=document.querySelector('.input');
       // 设置一个标准,用来控制事件的触发
        let temp=null;
         // input 元素获取用户输入时触发
        input.addEventListener('input',delay(function()
        {
            console.log(this.value)
        },500))
        function delay(fun,time) { 
            temp=null;
            return function(){
            if(temp !== null){
                clearTimeout(temp);
            }
            temp = setTimeout(() => {
               fun.call(this)   //改变this指针
            },time)
            }
         }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

相关阅读:
【数据结构-树】线索二叉树
LeetCode198：打家劫舍
Hadoop3.0大数据处理学习3（MapReduce原理分析、日志归集、序列化机制、Yarn资源调度器）
【9】c++11新特性 —＞&&的特性
Springboot中EasyExcel导出及校验后导入前后台功能实现
yolov5 优化系列（三）：修改损失函数
Java-Based Configuration Beans for Ioc Container
前端优化方案--改善 JS 性能
猿创征文｜网络安全的十大经典工具介绍
RDP协议流程详解（二）Basic Settings Exchange 阶段

原文地址：https://blog.csdn.net/weixin_51610980/article/details/127883423