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

编程三昧

关注

发布于: 2021 年 06 月 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);    });}

复制代码

代码说明：

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

运行效果如下：

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

总结

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

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

~ 本文完

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好！我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

发布于: 2021 年 06 月 17 日阅读数: 9

原文链接:【http://xie.infoq.cn/article/01889c2e6c17a03214cfb4abb】。

编程三昧

关注

学习有趣的知识，塑造有趣的灵魂！ 2019.08.30 加入

还未添加个人简介

发布

暂无评论

创作场景

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

前戏 🌰

新需求 🤬

实现防抖

总结

编程三昧

评论