Javascript之基础防抖函数

Ailerx

已于 2025-04-18 00:08:32 修改

阅读量954

点赞数 6

文章标签： javascript 开发语言 ecmascript

于 2024-04-12 10:14:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73467691/article/details/135936061

版权

不用看的前言

最近在学习过程中遇到一些问题，需要用防抖函数解决。曾几何时，这个知识学过了，但是长时间没用也忘了。现在重新整理整理。记牢这个知识。

1.为何要用防抖函数？

在实际前端项目中，或者在大家练习过程中。应该会遇到这样的情况。比如说：在连续触发事件时，在这个过程中，可能会有大量的请求，但是这个过程又不是我们想要的，我们要的是最后的那个效果。例如我们用的浏览器的搜索框，当我们输入后，搜索框下面会有联想提示。他这个过程可能就用到了防抖函数，又或者说当我们改变浏览器窗口时，在过程中可能也会不断触发事件，但是我们只需要在我们想要窗口大小的位置时发送一次请求就行了。这样就会大大的降低资源的消耗。

2.原理

防抖函数本质就是用Javascript的定时器来实现的，在事件触发过程中，如果在我们定时未结束时就有下次事件发生时，那就把上一次事件取消。

3.具体实现

我们以一个例子来具体实现防抖函数的功能，我们先看下代码。

3.1 初始代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>输入：<input type="text"></div>
    <div class="two"><p></p></div>
</body>
<script>
    const output=document.querySelector('.two')
    var input = document.querySelector('input');
    
    //初始代码
    input.addEventListener('input',(e) =>{
        output.innerText += `输出：${e.target.value} \n`;
    });
</script>
</html>

3.2 效果展示

我们可以很清楚的看到整个过程中事件在持续触发，这不是我们想要的。接下来我们对javascript代码进行修改。

3.3 修改代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>输入：<input type="text"></div>
    <div class="two"><p></p></div>
</body>
<script>
    const output=document.querySelector('.two')
    var input = document.querySelector('input');
    
    //初始代码
    // input.addEventListener('input',(e) =>{
    //     output.innerText += `输出：${e.target.value} \n`;
    // });

    //防抖函数
    function debaunce(fn, delay) {
        let timer = null;
        return function() {
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        }
    
    }
    
    
    //事件在一秒后触发
    input.addEventListener('input', debaunce(function(e) {
        output.innerText += `输出：${e.target.value} \n`;
    }, 1000));
</script>
</html>

3.4 修改后效果展示

4.代码讲解

上述代码，我们只需要关注js的代码即可，初始代码，是很基础的，导致的结果我们也很容易看到，所以重点看修改后的部分。

<script>
    const output=document.querySelector('.two')
    var input = document.querySelector('input');

    //防抖函数
    function debaunce(fn, delay) {
        let timer = null;
        return function() {
            let context = this;
            let args = arguments;
            clearTimeout(timer);
            timer = setTimeout(function() {
                fn.apply(context, args);
            }, delay);
        }
    
    }
    
    
    //事件一次触发
    input.addEventListener('input', debaunce(function(e) {
        output.innerText += `输出：${e.target.value} \n`;
    }, 1000));
</script>

debaunce函数就是我们的防抖函数，当我们在输入框中输入时，会触发事件监控，然后执行debaunce函数。其接收两个参数，一个是我们实际要实现的功能，另一个是延迟的时间。在进入该函数之后，我们需要一个变量来记录上一次的计时器，以便于我们清除它，不然事件还是会执行多次。有个问题不知大家看到没，明明我传进来的就是一个函数，为什么不直接写fn(),而是用fn.apply(context,args)。首先作用域不同,this的指向也是不同的，在全局作用域中this指向window。在debaunce函数内部的this指向才是input，而直接写fn()的话那，那这个函数里执行的e.target.value的e指向的则是window，解决问题的方案有两种：一是上边代码用fn.apply()，还有一个解决方法就是用箭头函数，这个大家应该都懂，箭头函数没有独立的 this。所以js部分代码又可以这样写：

const output=document.querySelector('.two')
    var input = document.querySelector('input');

    //防抖函数
    function debaunce(fn, delay) {
        let timer = null;
        return (e)=> {
            clearTimeout(timer);
            //let context = this;
            //let args = arguments;
            timer = setTimeout(function() {
                // fn.apply(context, args);
                fn(e)
            }, delay);
        }
    
    }
    
    //事件一次触发
    input.addEventListener('input', debaunce((e)=> {
        output.innerText += `输出：${e.target.value} \n`;
    }, 1000));