【功能实现】vue节流、防抖函数封装与使用方法

功能简介

函数防抖和节流，目的为优化高频率执行js代码的一种手段，js中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，为了防止多次调用导致前端界面压力递增，需要对这类事件进行调用次数的限制，所以出现了防抖与节流。
节流函数： 在一定时间内控制事件的执行次数
防抖函数： 在多个相同事件仅执行最后一个事件

实现方式

都可以通过setTimeout实现，在一定时间内进行节流或防抖

代码实现

节流函数

// func是用户传入需要节流的函数
// delay是间隔
export function throttle(func, delay = 200){
	// 缓存一个定时器
	let timer = null
	// 这里返回的函数是每次用户实际调用的节流函数 
	return function(...args) {
		if (!timer) { //判断timer是否有值,如果没有则说明定时器不存在即可继续执行
			timer = setTimeout(() => { //关
				func.apply(this, arguments)
				timer = null; //开
			}, delay)
		}
	}
}

防抖函数

// func是用户传入需要防抖的函数
// delay是等待时间
export function debounce(func, delay = 200){
	// 缓存一个定时器
	let timer = 0
	// 这里返回的函数是每次用户实际调用的防抖函数 
	return function() {
		// 如果已经设定过定时器了就清空上一次的定时器
		if (timer) clearTimeout(timer)
		// 开始一个新的定时器，延迟执行用户传入的方法
		timer = setTimeout(() => {
			func.apply(this, arguments)
		}, delay)
	}
}

vue组件内使用

<template>
	<div>
		
	</div>
</template>

<script>
	import {
		debounce,
		throttle,
	} from '@/utils/util.js'
	export default{
		created() {
			for(let i = 0;i < 100; i++){
				this.debounceTest(i)
				this.throttleTest(i)
			}
		},
		methods:{
			// 防抖函数测试，由于并发执行了100次所以仅执行最后一次，前面的执行均被防抖掉了
			// 打印结果为 debounce 99
			debounceTest:debounce((i)=>{
				console.log('debounce',i)
			},200),
			// 节流函数测试，由于并发执行了100次所以仅执行了第一次，后续的被节流掉了
			// 打印结果为 throttle 0
			throttleTest:throttle((i)=>{
				console.log('throttle',i)
			},200)
		}
	}
</script>

<style>
</style>

效果图