本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的。

前置知识点：js、闭包、es6、vue等。

使用背景：

很多场景下，页面具有交互性，免不了会触发一些事件以及发送一些请求，依赖于像输入框、选择框、点击按钮等等。这时候就会出现一个现象，对使用者的操作不可控。如一个点击按钮，其绑定一个事件或发送一个请求，那么在连续快速点击时，如果不做限制，那么点击多次，将触发对应次数的事件或者发送对应次数的请求，这对使用者来说可能就是短时间内的简单操作，但是试想一下，在连续点击多次的情况下，可能会存在操作多次dom或者发送多次请求，且这些操作都是一样的（不必要的），此时造成一个问题，页面有可能会重复渲染多次，且每次渲染一致，或者是连续多个同样的请求会给服务器造成压力（特别是每个请求需要处理复杂的逻辑或者表操作时），最终导致性能下降，资源浪费，容易产生意想不到的bug。为了对使用者在短时间内进行同样且不必要的操作进行限制，来减少资源损耗、提高性能，避免bug的产生，此时可以使用防抖、节流。

防抖

作用：前面的所有的触发都会被取消，最后一次执行在规定的时间之后才会触发，也就是说，如果连续快速地触发多次，只会执行最后那一次。

示例

现在页面有一个输入框和一个按钮，完成以下功能：

在输入框输入内容时，自动触发事件，发送请求；

在点击“搜索”按钮时，发送请求；

根据上面的需求，我们现在简单实现如下

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>

<script>
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    //输入框输入触发事件
    inputChange(val){
      console.log('---输入框内容---',val)
      console.log('---发送请求---')
    },

    //点击按钮发送请求
    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

现在，在输入框输入内容，查看打印信息

此时发现控制台中打印了三次， 我是很快速地输入了“leo”，但是却打印了三次，相当于发送了三次请求，而前面两次对于我来说是没必要的，还占用了资源。现在还只有三个字符，试想一下，如果输入的是一串长字符串，如下

这么夸张，我要是服务器我都想罢工了。

再看点击“搜索按钮”。我快速点击按钮多次，会有以下现象

竟然请求了32次，这样也就罢了，而且还都是同样的请求，我要是服务器就直接不干了。

以上只是非常小的场景，还有很多相似的情形，即都是连续操作时触发相同且不必要的事件。

此类情况我们姑且简单称为“抖动”，那么我们限制此类情况的做法，便称为防抖。

那么上面两个功能该如何进行优化？

1、在输入框连续输入时内容，确保输入停止后过了1s再触发事件或发送请求；

2、点击“搜索”按钮，发送请求，确保无论连续点击多少次，只能过了1s后再点击才能触发。

对于优化1，我们使用防抖；对于优化2，我们使用节流。

防抖的使用

先实现功能，再阐述原理。现在，我们在项目中scr目录下新建一个文件夹util，里面新建一个文件debounce.js，实现防抖方法并导出。

//防抖实现
export default function debounce(fn,delay){
  let timer = null
  return function() {  //借助闭包
    let th = this;
    let args = arguments;
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      fn.apply(th, args)
    },delay)
  }
}

然后在页面中导入，并修改功能实现

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>

<script>
import debounce from '../../util/debounce'
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    /*防抖：
     *前面的所有的触发都会被取消，最后一次执行在规定的时间之后才会触发，
     *也就是说，如果连续快速的触发多次，只会执行一次
    */
    inputChange:debounce(function(val){       //使用自定义实现的防抖功能
      console.log('---输入框内容---',val)
      console.log('---发送请求---') 
    },1000),  //延迟执行时间可以视具体情况而定

    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

在页面输入长字符串，控制台打印如下

此时只打印一次，相当于只发送一次请求，这样是不是对服务器更友好了？

那么具体实现原理是怎样的呢？以下实现原理对初学者而言可能比较难理解，需要掌握js知识与vue的具体工作机制，可以先学会使用，再慢慢理解。

//防抖实现
export default function debounce(fn,delay){   //传入所要防抖的方法或者回调与延迟时间
  let timer = null
  //借助闭包，使得变量timer不被回收
  return function() {
    //保存当前环境下的实例对象，this即为引入该方法的那个组件实例对象
    let th = this;
    //保存传入参数
    let args = arguments;
    //第一次timer为null，跳过该判断，执行setTimeout()
    if(timer){
      //之后如果timer存在，则把上一次的销毁，也就是setTimeout()，则里面的函数执行也会抛弃
      clearTimeout(timer)
    }
    timer = setTimeout(()=>{
      //apply()，改变this指向，指向正在操作的组件实例，传入参数
      fn.apply(th, args)
      timer = null
    },delay)
  }
}

//由于使用闭包，使得timer不被回收，在A组件中每次调用该方法时会去判断timer是否存在，如果存在，
//表示上一次输入在等待执行fn()，期间如果继续输入，且在1s内，则会把上一次未执行的
//（setTimeout中的）fn()销毁，重新定时1s，以此来达到输入结束过1s才执行fn()，即触发事件或者发送
//请求。

快速使用防抖

那么问题来了，如果不会写防抖实现方法，有没办法使用防抖呢？答案是必须的！

其实我们在创建vue项目的时候已经引入了这个功能。

查看项目目录，找到node_modules文件夹（npm install之后生成），在里面找到lodash文件夹，往下找，你会找到一个debounce.js，这个就是防抖的实现方法

现在验证一下，将自定义的防抖函数注释，导入lodash里面的debounce.js

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'   //导入lodash中的debounce
//import debounce from '../../util/debounce'    //注释自定义方法，进行验证
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    inputChange:debounce(function(val){     //lodash中的debounce
      console.log('---输入框内容（lodash）---',val)
      console.log('---发送请求---') 
    },1000),
    
    search(){
      console.log('---发送请求---')
    }
  }
}
</script>

在输入框输入，验证防抖功能

防抖功能成功实现，我们可以直接使用lodash里面的debounce.js。

节流

作用：在规定的时间间隔范围内不会重发触发回调，只有大于时间间隔才会触发回调，也就是说，把频发触发变成少量触发。

上面使用防抖优化了输入框连续输入时多触发的问题，那么优化多次点击按钮在规定的时间间隔内只触发一次，我们需要用到节流。

节流的使用

同样的，先实现功能，在阐述原理。现在，我们在util文件夹新建一个文件throttle.js，实现节流方法并导出。

//节流实现
export default function throttle(fn,delay){
  let flag = true
  return function() {
    let th = this;
    let args = arguments;
    if(!flag){
      //未超过时间间隔，flag无效，不执行fn
      return false 
    }
    fn.apply(th, args)
    flag = false    //在时间间隔内把状态位flag设为无效（false）
    setTimeout(() => {
      flag = true   //超过时间间隔把状态位flag设为有效（true）
    }, delay)
  }
}

然后在页面中导入，并修改功能实现

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>

<script>
import throttle from '../../util/throttle'
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    /*节流：
     *在规定的时间间隔范围内不会重发触发回调，只有大于时间间隔才会触发回调
     *也就是说，把频发触发变成少量触发
    */
    search:throttle(function(){
      console.log('---发送请求---')
    },1000)    //可根据具体设置时间间隔
  }
}
</script>

在1s内连续点击按钮，控制台打印如下

此时只打印一次，相当于只发送一次请求，相比于之前的32次，服务器是不是“开心”极了。

那么具体实现原理是怎样的呢？以下实现原理对初学者而言可能比较难理解，需要掌握js知识与vue的具体工作机制，可以先学会使用，再慢慢理解。

//节流实现
export default function throttle(fn,delay){
  //有效标志，用来判断是否可以允许下一次执行，true表示允许，false表示禁止
  let flag = true
  //借助闭包，使得变量flag不被回收
  return function() {
    //保存当前环境下的实例对象，this即为引入该方法的那个组件实例对象
    let th = this;
    //保存传入参数
    let args = arguments;
    //如果flag为false，不允许执行fn()
    if(!flag){
      //未超过时间间隔，flag无效，不执行fn()
      return false 
    }
    fn.apply(th, args)
    //在时间间隔内把状态位flag设为禁止（false）
    flag = false
    setTimeout(() => {
      //超过时间间隔把状态位flag设为允许（true）,这样下次就能执行fn()了
      flag = true
    }, delay)
  }
}

快速使用节流

是的没错，lodash里面也有节流方法，可以直接使用，效果与自定义节流方法一致

将自定义的节流函数注释，导入lodash里面的throttle.js

<template>
  <div class="main">
    <el-input v-model="inputVal" placeholder="请输入内容" @input="inputChange"></el-input>
    <el-button type="plain" @click="search">搜索</el-button>
  </div>
</template>

<script>
import throttle from 'lodash/throttle'       //导入lodash的throttle
//import throttle from '../../util/throttle'
export default {
  name:'A',
  data(){
    return {
      inputVal:''
    }
  },
  methods:{
    /*节流：
     *在规定的时间间隔范围内不会重发触发回调，只有大于时间间隔才会触发回调
     *也就是说，把频发触发变成少量触发
    */
    search:throttle(function(){
      console.log('---发送请求（lodash）---')
    },1000)
  }
}
</script>

在1s内连续点击按钮，控制台打印如下

节流功能成功实现，我们可以直接使用lodash里面的throttle.js。

以上就是防抖、节流的基本使用，不单是在这两种场景中使用，类似的需要控制使用者操作交互次数时，都可以使用防抖或者节流，面试中也常问到，甚至让手写实现这两个功能，所以必须掌握。