防抖

什么是防抖？

• 防抖，即短時間內(nèi)大量觸發(fā)同一事件，只會執(zhí)行一次函數(shù)，實現(xiàn)原理為設(shè)置一個定時器，約定在xx毫秒后再觸發(fā)事件處理，每次觸發(fā)事件都會重新設(shè)置計時器，直到xx毫秒內(nèi)無第二次操作，防抖常用于搜索框/滾動條的監(jiān)聽事件處理，如果不做防抖，每輸入一個字/滾動屏幕，都會觸發(fā)事件處理，造成性能浪費。

防抖的實現(xiàn)

index.js
/**
* @desc 函數(shù)防抖
* @param func 目標函數(shù)
* @param wait 延遲執(zhí)行毫秒數(shù)
*/
export const debounce = (fn, gapTime) => {
    let _lastTime
    return function () {
        clearTimeout(_lastTime)
        _lastTime = setTimeout(() => {
            fn.apply(this, arguments)
        }, gapTime)
    }
}

<template>
  <div>
    <div>
      {{num}}
    </div>
    <input
      type="text"
      v-model="value"
      @keydown="inputHandle"
    >
  </div>
</template>

<script>
import { debounce } from '../untils/index'
export default {
  data() {
    return {
      num: 0,
      value: ''
    };
  },
  methods: {
    inputHandle: debounce(function () {
      this.num++
    }, 1000)
  }

};
</script>

節(jié)流

什么是節(jié)流？

• 防抖是延遲執(zhí)行，而節(jié)流是間隔執(zhí)行，函數(shù)節(jié)流即每隔一段時間就執(zhí)行一次，實現(xiàn)原理為設(shè)置一個定時器，約定xx毫秒后執(zhí)行事件，如果時間到了，那么執(zhí)行函數(shù)并重置定時器，和防抖的區(qū)別在于，防抖每次觸發(fā)事件都重置定時器，而節(jié)流在定時器到時間后再清空定時器

節(jié)流的實現(xiàn)

index.js
/**
* @desc 函數(shù)節(jié)流
* @param func 函數(shù)
* @param wait 延遲執(zhí)行毫秒數(shù)
*/
export const throttle = (fn, gapTime) => {
    if (gapTime == null || gapTime == undefined) {
        gapTime = 1500
    }
    let _lastTime = null
    // 返回新的函數(shù)
    return function () {
        let _nowTime = +new Date()
        if (_nowTime - _lastTime > gapTime || !_lastTime) {
            fn.apply(this, arguments) //將this和參數(shù)傳給原函數(shù)
            _lastTime = _nowTime
        }
    }
}

<template>
  <div>
    <div>
      {{num}}
    </div>
    <div @click.stop="clickHandle">點擊</div>
  </div>
</template>

<script>
import {  throttle } from '../untils/index'
export default {
  data() {
    return {
      num: 0
    };
  },
  methods: {
    clickHandle: throttle(function () {
      this.num++
    }, 1000)
  }

};
</script>

本文參考鏈接 https://juejin.im/post/5e8b261ae51d4546c0382ab4#heading-6