• 防抖及其优化

    文章目录

    防抖

    什么是防抖

    防抖就是在事件被触发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
  • 相关阅读:
    RS232电路设计
    关于openfeign的http和rpc
    【面试题】JavaScript面试题详细总结（一）
    SpringSecurity之UserDetailsService详解
    微信小程序学习day01
    Mapstruct @Mapper @Mapping 使用介绍以及总结
    【MySQL】存储引擎
    KDD 2022 | 生命科学中的图神经网络：机遇和解决方案
    【LeetCode每日一题】——130.被围绕的区域
    Mybatis缓存机制
  • 原文地址：https://blog.csdn.net/weixin_51610980/article/details/127883423