防抖及其优化

最新推荐文章于 2024-03-20 22:03:32 发布

醉挽清欢

最新推荐文章于 2024-03-20 22:03:32 发布

阅读量328

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51610980/article/details/127883423

版权

js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

文章目录

防抖
缺点
优化--闭包

防抖

什么是防抖

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

结果

在这里插入图片描述
由此可见在我们输入的过程中，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)
        })

结果

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

缺点

定义了一个新的全局变量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)
            }
         }