因为它，我差点删库跑路：js防抖与节流

摘要

前言

在前端开发中，频繁的事件触发可能导致性能问题，如数据重复提交。为解决这一问题，可以采用js中的防抖(debounce)和节流(throttle)技术。

防抖的概念

防抖是指一个事件被触发后，在指定时间n秒内函数只执行一次。如果在n秒内该事件被再次触发，则重新计算函数的延迟执行时间。这种技术适用于如resize、scroll等事件，能有效避免频繁触发导致的性能问题。

防抖代码实现

实现防抖功能的核心是使用setTimeout来延迟事件处理函数的执行，如果在设定时间内再次触发事件，之前的延迟执行会被清除，重新开始计时。只有在最后一次触发事件后等待设定时间过去，才会执行事件处理函数。

节流的概念

节流是确保一个函数在一定时间段内只执行一次，即使该事件被连续触发。这种方法常用于无限滚动的场景，确保在滚动过程中按照设定的时间间隔执行事件处理，而不是连续不断地执行。

节流代码实现

节流函数的实现依赖于时间戳和setTimeout。事件触发时记录当前时间，如果与上一次触发的时间间隔超过设定延迟，则立即执行；否则，使用setTimeout延后执行。

防抖和节流的区别

防抖关注事件触发的延迟执行，只有最后一次触发后的延迟过后，事件处理函数才会执行。节流则确保在指定时间内即使事件连续触发，事件处理函数也只执行一次。

总结

防抖和节流技术在前端开发中简单实用，能有效提升性能和用户体验。开发者应根据不同的场景选择合适的方法应用。