vue之事件 | 方法的防抖与节流

前言

前端开发过程中，经常会遇到这么一个场景：频繁触发

---

1、浏览器事件的短时间内频繁触发多次：如监听鼠标滚动分页，导致短时间内api触发多次
2、按钮点击，导致重复提交等

---

如果你也有同样的需求：那么你该了解 lodash 了

一、lodash是什么？

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
当然它还有很多其它功能，有兴趣的可以去了解：👉👉👉传送门👈👈👈

说明：本文仅用到了lodash的 Throttling、Debouncing

二、使用步骤

1.安装库

代码如下：

# npm
npm -i --save lodash
# yarn
yarn add lodash

2.引入库

代码如下：

import lodash from 'lodash'

3. 使用

<template>
	<div class="innerI0" @scroll="handleScroll()">
		这是浏览器事件示例
	</div>
	<button @click="debouncingMethod()">Click me as fast as you can!</button>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    // 浏览器事件：throttle限流
  	handleScroll().lodash.throttle((e) => {
		// 此处e为scroll事件
		console.log(e.target)
	}, 3000)
	// 点击事件：debouncing防抖
    debouncingMethod: lodash.debouncing(() => {
      console.log('I get fired every two seconds!')
    }, 3000)
  }
}
</script>

没错，你没看错，就是这么简单😮😮😮