debounce 与throttle

背景

开发过程中我们会遇到一些场景，事件频繁被触发，导致频繁的DOM操作等，导致UI卡顿 甚至浏览器崩溃等。

1、window对象的resize、scroll 事件

2、拖拽时的mousemove事件

3、input的change、keyup事件等

4、游戏中的mousedown、keydown事件

5、发送请求按钮为了防止用户不停的点击

解决方案

这些场景我们会对他做节流处理，也就是说一段时间内触发的事件我们的函数只执行一次。throttle和debounce 都可以帮我们在一段时间内防止函数被多次调用。下面来聊一下debounce 和 throttle 这两种解决方案。

先查了一下这两个单词的英文意思，debounce：去抖；防反跳， throttle: 节流。

debounce：

当调用动作n毫秒后，才会执行该动作。如果这n毫秒内又调用该动作，则重新计算时间。

例如：一个点击事件，用了debounce，点击事件被执行直到你停止点击 n毫秒后。

throttle：

当调用动作被触发，立即执行，但是这n毫秒内，再次触发不会被执行。也就是说一个执行周期（n毫秒）内最多只能执行一次。

 

举个?：

页面存在一个按钮，点击时会触发点击事件。用throttle和debounce 做优化，设置执行周期为1000ms。然后不停的点击按钮。则：

debounce(handleClick, 1000) //只会执行一次，在最后一次点击完1000ms后

throttle(handleClick, 1000) //第一次点击立即执行一次，1000ms后如果再被点击则再执行

使用场景：

debounce： 

1、input change时 自动发送ajax请求

2、window resize时重新计算样式或布局

throttle：

1、scroll 时更新页面

2、防止用户疯狂点击按钮，而触发事件

 平时比较常用还是throttle。