vue中的防抖和节流（应用实例加分析，拒绝千篇一律）

函数防抖（debounce）:当持续触发函数时，函数不执行，间隔一段时间后再执行。 防抖即防止抖动，这里的函数防抖时防止函数多次执行，抖动时高频率且无规律的，如果高频率的触发函数势必会对性能造成影响，因此，为防止高频触发函数，我们要做函数防抖处理，举个例子：input的输入，每次input输入后都需要去数据库比对当前输入的值是否存在，用户一直在输入，如果每次输入就要去数据库比对那触发就太频繁了，为此我们可以加防抖，当用户不再输入后间隔一段时间再去执行相应的函数。

函数节流（throttle）:当持续触发函数时，保证一段时间内只执行一次函数。节流即节省流量，比如水龙头放水，把水龙头关小，水流量就会降低，这样就能保证即放水又不会浪费。举个例子：scroll事件，用户下拉加载数据，一直刷新，一秒钟操作了十回，但一秒钟内只执行一回，这样保证一秒钟时间内，至少执行了一回，又不频繁触发函数。

以上就是函数防抖和节流的大致介绍，刚开始接触防抖和节流觉得很高大上，后来看了一些博客介绍之后有了自己的理解，我觉得结合实际例子来理解概念会更容易一些，将这些应用到我们的功能开发中，更能理解其用处和含义。

vue中的函数防抖，看了很多博客，都是直接贴的代码，不是特别容易理解，我就针对自己在项目中用到的情况，简单写一下，比想象中的要简单，一起来看看吧。

函数防抖

实际应用：input输入，每次输入值之后去数据库比对是否存在，当不输入后一段时间再执行函数。这里省略了函数，只打印input的值。

<template>
  <div style="margin: 20px;">
    <el-input v-model="inputVal"/>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      inputVal: '',
      timer: null
    }
  },
  watch: {
    inputVal() {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = null
      this.timer = setTimeout(() => {
        this.handleJudge()
      }, 1000)
    }
  },
  methods: {
    handleJudge() {
      console.log(this.inputVal)
    }
  }
}
</script>

我们现在来分析一下，其实防抖就是为了不再触发后一段时间内再执行，核心在于定时器的应用，每次触发函数，清空定时器，直到不再触发函数后，间隔1000ms，执行定时器内的函数。

函数节流

实际应用：按钮的点击，用户短时间内多次点击，只执行一次点击函数。

<template>
  <div style="margin: 20px;">
    <el-button @click="handleClick()">click</el-button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      timer2: null,
      switchFlag: true
    }
  },
  methods: {
    handleClick() {
      if (!this.switchFlag) {
        return
      }
      this.switchFlag = false
      this.timer2 = setTimeout(() => {
        console.log('节流示例')
        this.switchFlag = true
      }, 1000)
    }
  }
}
</script>

我们现在来分析一下，其实节流就是一段时间内只执行一次函数，期间多次执行都不予以处理，实现这个功能我们需要定义一个开关和一个定时器，默认开关为开，执行一次函数后，开关置为关，再次执行，判断开关状态，为关则返回，不再向下执行，定时器1000ms后，触发函数，并把开关置为开，回到一开始的状态。

以上是函数防抖和节流的针对性应用，在一个项目中我们这样用肯定是不行的，所以还要封装成公用方法，精简我们的代码，下面贴2段经典常用的防抖和节流的代码。

/**
 * 函数防抖 (只执行最后一次点击)
 * @param fn
 * @param delay
 * @returns {Function}
 * @constructor
 */
export const Debounce = (fn, t) => {
  let delay = t || 500
  let timer
  return function () {
    let args = arguments
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      timer = null
      fn.apply(this, args)
    }, delay)
  }
};
/**
 * 函数节流
 * @param fn
 * @param interval
 * @returns {Function}
 * @constructor
 */
export const Throttle = (fn, t) => {
  let last
  let timer
  let interval = t || 500
  return function () {
    let args = arguments
    let now = +new Date()
    if (last && now - last < interval) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        fn.apply(this, args)
      }, interval)
    } else {
      last = now
      fn.apply(this, args)
    }
  }
}

具体到vue中使用的话，将2个方法放到公用方法的js里，并导出，应用如下：

<template>
  <div style="margin: 20px;">
    <input v-model="keyword" type="text" @keyup="appSearch">
  </div>
</template>
<script>
import { Debounce } from '@/commonFunction/common'
export default {
  name: 'Test',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    appSearch: Debounce (function() {
      this.getAppList()
    }, 1000),
    getAppList() {
      console.log(this.keyword)
    }
  }
}
</script>

关于防抖和节流的细节分析已经有很多博客了，这里就不再说了，里边还涉及很多知识点，在下一篇博客中，针对防抖节流函数中应用到的知识点进行详细补充说明。 下面附上一篇我看过还不错的文章，可以帮助大家理解。
添加链接描述

arguments

call bind apply

转载：https://blog.csdn.net/weixin_43254676/article/details/102507865