防抖与节流方案_防抖和节流

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

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

1 // html

2

3

0

4

5

6 // js

7 functioncount() {

8 document.getElementById('content').innerHTML = Math.random().toFixed(6)

9 }

10

11 window.onmousemove = count

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

1.防抖debounce

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

1 functiondebounce(func, wait) {2 let timeout3 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

Debounce

7

8 *{9 margin: 0;10 padding: 0;11 border: 0;12 }13 #content{14 box-sizing: border-box;15 height: 100vh;16 width: 100vw;17 padding-top: 60px;18 background-color: #87ceeb;19 font-size: 60px;20 text-align: center;21 color: #fff;22 overflow: hidden;23 }24

25

26

27

0

28

29

30 functioncount() {31 document.getElementById('content').innerHTML = Math.random().toFixed(6)32 console.info(Math.random().toFixed(6))33 }34 //window.onmousemove = count

35

36 //防抖 - 超过时间间隔后触发一次处理函数

37 functiondebounce(func, wait) {38 let timeout39 return function() {40 if(timeout) {41 clearTimeout(timeout)42 }43 timeout =setTimeout(func, wait)44 }45 }46 //window.onmousemove = debounce(count, 1000)

47

48 //防抖 - 先执行一次处理函数

49 functiondebounceAdvance(func, wait) {50 let timeout51 return function() {52 let context = this

53 let args =arguments54 if(timeout) {55 clearTimeout(timeout)56 }57 let callNow = !timeout58 timeout = setTimeout(() =>{59 timeout = null

60 func.apply(context, args)61 }, wait)62 if(callNow) {63 func.apply(context, args)64 }65 }66 }67 window.onmousemove = debounceAdvance(count, 500)68

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

Throttle

7

8 *{9 margin: 0;10 padding: 0;11 border: 0;12 }13 #content{14 box-sizing: border-box;15 height: 100vh;16 width: 100vw;17 padding-top: 60px;18 background-color: #87ceeb;19 font-size: 60px;20 text-align: center;21 color: #fff;22 overflow: hidden;23 }24

25

26

27

0

28

29

30 functionhandle() {31 document.getElementById('content').innerHTML = Math.random().toFixed(6)32 console.info(Math.random().toFixed(6))33 }34 //window.onmousemove = handle

35

36 //时间戳版

37 let throttle = function(func, delay){38 let prev =Date.now()39 return function() {40 let now =Date.now()41 if(now - prev >=delay){42 func()43 prev =Date.now()44 }45 }46 }47 //window.onmousemove = throttle(handle, 1000)

48

49 //定时器版

50 let throttle2 = function(func, wait){51 let timeout52 return function() {53 if(!timeout){54 timeout = setTimeout(()=>{55 func()56 timeout = null

57 }, wait)58 }59 }60 }61

62 window.onmousemove = throttle2(handle, 1000)63

64

65

View Code

3.应用场景

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

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

说下我的案例：

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

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