在vue中使用防抖函数或节流函数

防抖和节流在这里就不多做解释了，对于防止用户多次快速点击时，或者懒加载等场景中会使用到这两种常用的限制函数。

防抖：

首先是防抖的函数：

/**
 * 防抖处理 适用于点击事件
 * @param {function}  func        回调
 * @param {number}    wait      时间窗口的间隔
 * @param {boolean}    immediate     是否立即执行
 */


export function debounce(func, wait = 500, immediate = true){
	let timer, ctx, args;
	const later = () => setTimeout(() => {
		timer = null;
		if (!immediate) {
			func.call(ctx, ...args);
			ctx = args = null;
		}
	}, wait);

	return function (){
		if (!timer) {
			timer = later();
			if (immediate) {
				func.call(this, ...arguments);
			}else{
				ctx = this;
				args = arguments;
			}
		} else {
			clearTimeout(timer);
			timer = later();
		}
	};
}

防抖函数的大概的原理就是当持续触发事件时，一定时间段内没有再触发事件

触发原函数（func）过后会有一个setTimeout时间（wait），在这个时间内再次触发原函数（func）的时候不会执行原函数，并且再次重置一次setTimeout，所以效果为连续触发后只会执行最后一次操作。

immediate 参数的作用就是是否马上执行原函数，如果参数immediate为false的话，不会马上触发原函数，而是等待wait时间后才会触发。

在vue中使用:

在vue中使用时，只需要引入之后在原函数外层包裹一下即可

// 首先引入防抖函数debounce

import {debounce} from './toolbox';

// template中click事件不变

<Button @click="createLive('creatRoom')">创建</Button>

// methods中事件的逻辑部分被包裹,type就是参数，如果没有参数就不用填

createLive: debounce(function (type) {
    console.log('这里面是函数逻辑');
}, 1000)

 

节流：

项目中并没有用到节流，但是大概写了一个函数供参考。

/**
 * 节流处理  适用于懒加载等场景
 * @param {function}  func      回调
 * @param {number}    wait      时间窗口的间隔
 */

export function throttle(func, wait= 1000) {
	let timer, canRun  = true;
	const later = () => setTimeout(() => {
		func.call(this, ...arguments);
		canRun = true;
	}, wait);

	return function () {
		if (!canRun) return;
		canRun = false;
		clearTimeout(timer);
		timer = later();
	};
}

节流函数的大概原理就是当持续触发事件时，保证一定时间段内只调用一次事件处理函数

在vue中使用起来与防抖是一样的。