阅读 2205

前端 JavaScript 之『防抖』的简单代码实现

这是我参与更文挑战的第17天,活动详情查看: 更文挑战

前戏 🌰

经过上一篇文章的总结,我们知道:短时间内高频率地触发事件,可能会导致不良后果。

具体到我们开发界来说,如果数据一直处于一种高频率更新的状态,那么可能会引发的问题如下:

  • 前后端数据交互频率过高,导致流量浪费。
  • 界面高频率渲染更新,引发页面延迟、卡顿或假死等状况,影响体验。

在进入正题之前,我们先来看下面这个例子:

<form action="" class="example-form">
    <div>
        <label for="name">名称</label>
        <input type="text" 
               name="name" 
               id="name" 
               placeholder="please input your name"
         >
    </div>
    <div>
        <label for="res">输入</label>
        <textarea type="multipart" 
                  name="res" 
                  id="res" 
                  placeholder="这里是每一次输入的结果"
        ></textarea>
    </div>
</form>
复制代码
window.onload = () => {
    const inputEle = document.querySelector("#name");
    const resEle = document.querySelector("#res");
    inputEle.addEventListener("input", function (event) {
        console.log(this.value);
        resEle.value += `\n${ this.value }`
    });
}
复制代码

频繁触发

在输入框的 input 事件中,将该输入框的当前值输出在多行文本框中。可以看到,每输入一个拼音字母,都会有一条输出记录,触发频率取决于人的打字速度。

新需求 🤬

假如,现在有这么一个新需求,要我们在 input 事件中加入新的逻辑:将输入框的当前值发往后台进行存储。

可以想象,这种情况下的前后端交互频率该有多高,其中很多数据都是没有必要即刻发送保存的,纯属浪费流量。

我们可以考虑对这个需求进行一下优化,只要控制一下交互频率就好,主要有以下两个方向:

  • 每隔几秒发送一次数据 —— 节流
  • 每当用户停止输入之后,开始计时,一定时间后发送一次数据 —— 防抖

实现防抖

首先,我们从防抖的方向进行实现:只有当用户停止输入一段时间后,才会将输入内容输出在多行文本框中。

window.onload = () => {
    const resEle = document.querySelector("#res");
    function changeOutputVal(value) {
        resEle.value += `\n${ value }`;
    }

    function debounce(fn, delay = 1000) {
        let timer = null;
        return function (...args) {
            console.log(args);
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }

            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        }
    }

    const outputRes = debounce(changeOutputVal, 1000);

    const inputEle = document.querySelector("#name");

    inputEle.addEventListener("input", (eve) => {
        outputRes(eve.target.value);
    });
}
复制代码

代码说明:

  1. 每一次事件被触发,都会清除当前的 timer 然后重新设置超时调用,即重新计时。 这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发;
  2. 只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行。

运行效果如下:

可以看到,在加入防抖代码之后,input 事件并不会每次输入都会输出在多行文本,而是会在用户停止输入 delay 时间之后触发输出,频率确实低了很多。从某种程度上来说,的确优化了页面显示效果,给人的视觉感受比较舒服。

总结

巧用防抖函数的,既可以优化性能,又能优化显示效果,一举两得。

~

~

代码比较粗糙,也比较基础,后面会逐步向着复杂的方向迭代,望各位看官海涵🙏

~

~

~ 本文完

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

mianshi

文章分类
前端
文章标签