JS中如何区分防抖与节流及其具体应用场景？

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

概念+函数防抖（debounce）指的是在一定时间内，当动作被连续频繁触发时，动作只会执行一次。也就是说，当调用动作过n毫秒后，才执行该动作；如果在这n毫秒内再次调用此动作，则重新计时。

概念

函数防抖（debounce）是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

函数节流是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

下面通过示例代码看下防抖和节流。

什么是防抖？and什么是节流？一起来开心的学习下吧。

首先什么是防抖：就是在一定的时间内事件只发生一次，比如你点击button按钮，1秒内任你单身30年手速点击无数次，他也还是只触发一次。