防抖和节流代码实现

最新推荐文章于 2023-08-21 15:51:52 发布

原创

最新推荐文章于 2023-08-21 15:51:52 发布 · 567 阅读

标签

#javascript #前端 #开发语言

收录于

防抖和节流是前端开发中用于性能优化的技术，控制函数执行频率。节流确保函数不会在短时间内连续调用，而防抖则是在事件触发后的一段时间内未再次触发才执行。两者的应用场景不同，防抖适用于防止重复执行，如输入验证，节流适用于限制执行频率，如滚动事件。

防抖和节流

含义：防抖（Debounce）和节流（throttle）都是用来控制某个函数在一定时间内执行多少次的技巧，两者相似而又不同。

函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。
作用：性能优化（控制触发频率，或者执行次数）

防抖

实现思路：当事情发生的时候，不直接执行事件处理函数，而且去开启一个定时器，开始等待计数（30ms),如果在计数过程中，又触发了事件，停止当前定时，从新开始计数

function debounce(fun,wait){
     
     
	var timer;
    return function