防抖及其优化

文章目录

防抖
缺点
优化--闭包

防抖

什么是防抖

防抖就是在事件被触发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

相关阅读:
今天博客访问量达到10W了，纪念一下
k8s教程（12）-pod 全自动调度
AI 原生时代，更要上云：百度智能云云原生创新实践
fastjson远程命令执行
hbase 集成 phoenix 实现 sql 化
c# - - - CentOS 7 部署ASP.Net Core项目
Java集合——Set接口
2023年华为杯数学建模 E题
vue3 封装 naive input 组件
CS5211中文规格书完整版|CS5211AN设计方案|CS5211电路设计资料

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