防抖和节流

防抖和节流是高频操作的优化方案，防抖是把连续的高频操作优化为最后一次操作(常用方案略有不同，此处仅介绍思路)，节流是将高频操作降频，固定时间内执行一次。

先通过触发浏览器的mousemove事件来介绍一下防抖和节流的实现：

 1 // html
 2 
 3   
0
 4 
 5 
 6 // js
 7 function count() {
 8     document.getElementById('content').innerHTML = Math.random().toFixed(6)
 9   }
10 
11   window.onmousemove = count

在不使用防抖的情况下直接给window绑定事件，只要鼠标移动，事件会一直被触发。

1.防抖debounce

可以在事件被触发时不直接执行处理函数，而是设定一个计时器，事件(短时间内)再次被触发就重新开始计时，直到超过一定间隔后才执行函数。

 1 function debounce(func, wait) {
 2   let timeout
 3   return function () {
 4     if (timeout) {
 5       clearTimeout(timeout)
 6     }
 7     timeout = setTimeout(func, wait)
 8   }
 9 }
10 window.onmousemove = debounce(count, 1000)

查看完整版：

 1 
 2 
 3 
 4   
 5   
 6   
 7   
25 
26 
27   
0
28 
29 
69 

View Code

2.节流throttle

节流是把高频操作降低到一段时间内(delay)执行一次，可以在第一次出发时创建一个时间戳prev，和再次触发事件的时间戳now比较，如果间隔大于delay就触发事件，重新计时

 1 // 时间戳版
 2 let throttle = function(func, delay){
 3   let prev = Date.now()
 4   return function() {
 5     let now = Date.now()
 6     if(now - prev >= delay){
 7       func()
 8       prev = Date.now()
 9     }
10   }
11 }
12 window.onmousemove = throttle(handle, 1000)

或者使用定时器完成，完整版：

 1 
 2 
 3 
 4   
 5   
 6   
 7   
25 
26 
27   
0
28 
29 
65 

View Code

3.应用场景

常用于用户不断改变浏览器大小、鼠标移动和输入验证的一些处理，这些最后触发一次的使用防抖即可；

鼠标不断点击、鼠标滚动不断加载等适合使用节流throttle.

说下我的案例：

一个数据在线编辑平台，用户需要不断输入X、Y、Z坐标调整物体位置，希望不用离开输入框就能实时看到变化，如果监听keyup事件就会过于频繁，这时就适合使用防抖。

另外一个是在地图中加载了20w+模型，每次移动地图都会触发模型的重新渲染，这是就需要再地图的move事件中进行一些干预，可以用防抖，不过幸运的是地图有moveend事件，也算是一种防抖吧。