如何将JavaScript函数防抖技术改写为长尾关键词？

本文共计1489个文字，预计阅读时间需要6分钟。

一、什么是函数防抖（Debounce）？

概念：函数防抖（Debounce）是指，在触发事件后，在指定的时间内，如果事件再次被触发，则重新计算等待时间。也就是说，只有在事件停止触发一段时间后，函数才会执行。

举例：点击按钮事件，设置防抖时间为2秒。用户连续点击按钮，如果在2秒内没有停止点击，那么函数只会在最后一次点击后2秒执行。如果用户在2秒内停止点击，则重新开始计时。

一、什么是函数防抖

概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会关闭电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。

二、为什么需要函数防抖

　　前端开发过程中，有一些事件，常见的例如，onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发），不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。