JavaScript防抖和节流的使用及区别

点击打开视频教程

什么场景下使用防抖和节流

在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。

为什么滚动scroll、窗口resize等事件需要优化

滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。

在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非常高，间隔很近。在日常开发的页面中，事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下，浏览器会卡帧。

滚动和页面渲染前端性能优化的关系

为什么滚动需要优化？前面提到了事件中涉及到大量的位置计算、DOM操作、元素重绘等等，这些又与页面的渲染有关系，页面渲染又与前端的性能优化有关系？套娃一样，一层套着一层，每一层都联系紧密，每一层都如此平凡且重要。

回顾一下前端的渲染和优化

web页面展示经历的步骤：js—style—layout—paint—composite。

网页生成的时候，至少会渲染（Layout+Paint）一次。用户访问的过程中，还会不断重新的重排（reflow）和重绘（repaint），用户scroll行为和resize行为会导致页面不断的进行重新渲染，而且间隔频繁，容易造成浏览器卡帧。

防抖Debounce

防抖Debounce情景

有些场景事件触发的频率过高（mousemove onkeydown onkeyup onscroll）

回调函数执行的频率过高也会有卡顿现象。 可以一段时间过后进行触发去除无用操作
1
2
3

防抖原理

一定在事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行，等触发事件 n 秒内不再触发事件才执行。

官方解释： 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

案例：

<template>
  <div id="app">
    
    <input type="text" v-model="searchStr">
  div>
template>

<script>
export default {
  name: 'App',
  data(){
    return {
      searchStr:"",
      fun:null
    }
  },
  watch:{
    searchStr: function (str) {
      if (typeof str ==='string'){
        if (str.trim().length!==0){
            this.debounce(this.changeStr,1000);
        }else {}
      }
    }
  },
  mounted(){
    
  },
  methods:{
    // 实现防抖
    debounce(fn,wait){
      if (this.fun!==null){
          clearTimeout(this.fun)
      }
      this.fun = setTimeout(fn,wait)
      // setTimeout(() => {

      // },1000)
    },
    changeStr(){
        console.log('已触发防抖机制')
    },
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

节流Throttle

节流Throttle情景

图片懒加载
ajax数据请求加载
1
2

节流原理

如果持续触发事件，每隔一段时间只执行一次函数。
1

官方解释： 当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

案例：

<template>
  <div id="app">
    
    <button @click="throttle(2000)">节流button>
  div>
template>

<script>
export default {
  name: 'App',
  data(){
    return {
      timeout:null
    }
  },
  mounted(){
    
  },
  methods:{
    // 实现节流
    throttle (wait) {
      if (!this.timeout) {
          this.timeout = setTimeout(() => {
            this.timeout = null
            console.log('已触发节流机制')
          }, wait)
      }
    }
  }
}
script>

<style scoped>

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

节流防抖总结

防抖：原理是维护一个定时器，将很多个相同的操作合并成一个。规定在延迟触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。

节流：原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。