vue+ts 使用lodash防抖处理数据

使用lodash中的防抖和节流

Vue中使用debounce防抖（ts）

使用的流程

1.安装

npm i --save lodash

2.在需要使用的文件中进行引入

完整引入

import _ from 'lodash'
// 这个方式 webpack 依然会将整个库打包。
import { random, debounce, findLast } from 'lodash'

按需引入

单独引入
import debounce from "lodash/debounce";
//当引用的方法过多时，弊端自现

3.防抖中的参数的介绍

debounce API走起

_.debounce(func, [wait=0], [options={}])

func (Function): 要防抖动的函数。

[wait=0] (number): 需要延迟的毫秒数。

[options={}] (Object): 选项对象。

[options.leading=false] (boolean): 指定在延迟开始前调用，默认false。

[options.maxWait] (number): 设置 func 允许被延迟的最大值。

[options.trailing=true] (boolean): 指定在延迟

testThrottle: _.throttle(function() {
  console.log("throttle");
}, 5000, {
  leading: true,
  trailing: false
})

一、抽象组件使用方式

1、封装抽象组件（debounce.js 文件）

import Vue from 'vue']()

const debounce = (func, time, ctx, immediate) => {
  let timer
  const rtn = (...params) => {
    clearTimeout(timer)

if (immediate) {
  let callNow = !timer
  timer = setTimeout(() => {
    timer = null
  }, time)
  if (callNow) func.apply(ctx, params)
} else {
  timer = setTimeout(() => {
    func.apply(ctx, params)
  }, time)
}

  }
  return rtn
}

Vue.component('Debounce', {
  abstract: true,
  props: ['time', 'events', 'immediate'],
  created() {
    this.eventKeys = this.events && this.events.split(',')
  },
  render() {
    const vnode = this.$slots.default[0]

// 如果默认没有传 events，则对所有绑定事件加上防抖
if (!this.eventKeys) {
  this.eventKeys = Object.keys(vnode.data.on)
}

this.eventKeys.forEach(key => {
  vnode.data.on[key] = debounce(
    vnode.data.on[key],
    this.time,
    vnode,
    this.immediate
  )
})

return vnode

  }
})

2、组件使用方式

引入全局组件

首先需要将 debounce.js 文件在入口文件（main.ts）中全局引入。当然也可以按照需要修改 debounce.js 文件，按需引入。

import Vue from 'vue'
import App from './App.vue'
...
import '@/xxx/debounce'

3、在模版中使用

在模版中使用

其中time为必选参数。 event 和 immediate 参数都是可选参数。

如果组件下有多个事件绑定，那么 event 可以自定义需要进行防抖处理的事件。

如果需要立即执行的话，可以将 immediate 参数设置为 true。

<template>
  <div>
    <Debounce :time="500" :immediate="true" events="click,mousemove">
      <button @click="print(123)" @mousemove="print2(123)" style="width: 500px;height: 500px">点击我</button>
    </Debounce>
  </div>
</template>


<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'


@Component
export default class Test extends Vue {
  print(v: number) {
    console.log(v)
  }

  print2(v: number) {
    console.log(v)
  }
}
</script>

第二种使用方式

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
  methods: {
    throttledMethod: _.debounce(() => {
      console.log('I only get fired once every two seconds, max!')
    }, 2000)
  }
}
</script>

二、普通使用方式

1、安装并引入 lodash 库，直接使用。

<template>
  <div>
    <button
      @click="clickButton(123)"
      @mousemove="clickButton(123)"
      style="width:500px;height: 500px"
    >click me!</button>
  </div>
</template>


<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import * as _ from 'lodash'


export default class Service extends Vue {
  private clickButton = _.debounce(this.print, 500, {
    leading: true,
    trailing: false
  })

  private print(v: number) {
    console.log(v)
  }
}
</script>

Vue中使用throttle节流（ts）

1.节流的基本使用

throttle API走起

_.throttle(func, [wait=0], [options={}])
func (Function): 要节流的函数。

[wait=0] (number): 需要节流的毫秒数。

[options={}] (Object): 选项对象。

[options.leading=true] (boolean): 指定调用在节流开始前，默认true。

[options.trailing=true] (boolean): 指定调用在节流结束后，默认true。

testThrottle: _.throttle(function() {
  console.log("throttle");
}, 5000, {
  leading: true,
  trailing: false
})

2.节流在项目中的应用

<template>
  <button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
  methods: {
    throttledMethod: _.throttle(() => {
      console.log('I get fired every two seconds!')
    }, 2000)
  }
}
</script>

3.节流的含义

testThrottle方法被绑定在一个按钮上，demo最终的效果是 ：
1、按钮点击后控制台立马打印了throttle——19:39:00；
2、5秒内点击多次按钮，最终只打印一次throttle——19:39:05前；
3、5秒后再点击一次，会重新打印throttle——19:39:05后；
PS：lodash默认trailing为true，那么最终的效果是在点击时会立即打印throttle，且5秒后又会再打印一次，即节流之前和之后都会执行该节流函数。