0
点赞
收藏
分享

微信扫一扫

vue之事件、点击防抖与节流

年迈的代码机器 2022-01-09 阅读 80

前言

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


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>
举报

相关推荐

0 条评论