如何将JavaScript的防抖函数debounce改写成长尾？

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

目录+防抖动简述+防抖应用示例

1.防抖前后示例效果截图

2.防抖示例完整demo

防抖动的应用场景+防抖动简述+函数防抖动（debounce）：+防止在短时间内过于频繁地执行相同的任务。+当短时间内的任务触发时，只执行最后一次任务。

目录

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

防抖动简述

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

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

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