下一篇代码html前端 JavaScript 之撙节的简略代码实现

防抖虽然在一定程度上对性能起到了优化效果，但是，我们也要看到它的局限性：如果高频率事宜一贯触发，那么回调函数中的逻辑就一贯得不到实行。

大家都知道，掘金的编辑器带有草稿箱的效果，即你输入的内容会保存下来，纵然我们退出编辑器页面了，再次进入还是可以找回前面输入的内容，这是由于编辑器的 input 事宜中实行了发送内容的防抖函数。
如下图所示：

现在假设：你的打字速率很快，基本上不带喘口气的，那么是否会导致很永劫光都保存不了一次数据？如果这时候你再以迅雷不及掩耳之势关闭掉浏览器，是不是你所写的内容就保存不下来了？

下一篇代码html前端 JavaScript 之撙节的简略代码实现 Docker

那么我们是否可以想办法避免上面这种情形呢？

在这种需求背景下，我们本日的主人公——「节流」开始粉墨登场。

节流的含义大家该当都知道了：每隔固定的韶光都会实行一次回函函数中的逻辑。

不该用节流函数，我们来看一下下面这个功能的实行效果：

<body> <form action="" class="example-form"> <div> <label for="name"> 名称 </label> <input class="input-ele" type="text" name="name" id="name" placeholder="please input your name" autocomplete="off"> </div> <div> <label for="res"> 输入 </label> <textarea class="input-ele" type="multipart" name="res" id="res" readonly placeholder="这里是每一次输入的结果"></textarea> </div> </form></body><script> 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 }` }); }</script>

实现的效果如下：

纵然我们想要实行输出逻辑，但是也不能接管这么高频率的输出，一个是造成了输出内容冗余，二是渲染强度高，不太划算。

新需求

如果，现在有这么一个新需求，要我们在 input 事宜中加入新的逻辑：每隔一段韶光后，都会实行一次回调函数中的逻辑。

这个需求是不是挺符合节流函数的利用场景的，那我们赶紧来实现一个吧。

实现节流

根据节流函数的定义：以固定的低频率实行代码逻辑，详细到我们上面的额需求来说，只要打开页面，不管你有没有输入，都会每隔几秒就实行一次保存数据的逻辑。

代码解释：

每一次事宜被触发，都会判断间隔韶光是否大于即是 delay，如果是，则实行输出逻辑；如果否，则打消原来的延时器，重新打算延时时间；

运行效果如下：

可以看到，在加入节流代码之后，输失事宜不会每次 input 事宜都触发，而是每隔 delay 韶光触发一次。

代码比较粗糙，也比较根本，后面会逐步向着繁芜的方向迭代，望各位看官海涵