如何实现JavaScript中的函数防抖动（debounce）技术？

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

目录+ 防抖动简述+ 防抖应用示例 1. 防抖前后示例效果截图 2. 防抖示例完整demo+ 防抖动的应用场景+ 防抖动简述+ 函数防抖动（debounce）

函数防抖动（debounce）：+ 防止在短时间内频繁执行相同的任务。

目录

• 防抖动简述
• 防抖应用示例
• 1.防抖前后示例效果截图
• 2.防抖示例完整 demo
• 防抖动的应用场景

防抖动简述

函数防抖动（debounce）：防止在短时间内过于频繁的执行相同的任务。 当短时间内的频繁是不必要的时候，就可以考虑去抖动，避免资源浪费，或造成不好体验。

函数防抖动的原理，主要是利用一次性定时器，延迟任务的执行，在延迟这段时间内， 如果任务再次被触发，则通过 clearTimeout 销毁上一次产生的定时器， 因为定时器的被销毁，之前被延迟执行的任务也会随之被取消执行。 这样就实现了在一定时间内，只执行一次任务。这一次的执行通常是最后一次的触发， 因为此前的触发因为定时器的销毁而被取消了。

多次触发只执行最后一次或许就是和“节流”概念的区别？它两在作用上挺像的，在具体实现上略有不同。 函数防抖（debounce）是短时间内连续多次触发，但只执行最后一次，即是说将多次执行变成了只执行最后一次，执行次数减少。