uniapp 防抖节流

什么是防抖与节流

1.防抖

在高频率点击时固定时间内只触发一次，每次点击时都会取消之前的延时调用

2.节流

在高频率点击时固定时间每次触发事件时设置一个延迟调用方法，每次点击时都会取消之前的延时调用

在文件utils中新建js文件

防抖代码

/**
  函数防抖
  fn 目标函数
  wait 延迟执行毫秒数
  immediately true - 立即执行， false - 延迟执行
 */
export const debounce = function(fn, wait = 1000, immediately = true) {
	let timer;
	return function() {
		let that = this,
			args = arguments;
		if (timer) clearTimeout(timer);
		if (immediately) {
			let callNow = !timer;
			timer = setTimeout(() => {
				timer = null;
			}, wait);
			if (callNow) fn.apply(that, args);
		} else {
			timer = setTimeout(() => {
				fn.apply(that, args);
			}, wait)
		}
	}
}

节流代码

/**
 函数节流
 fn 函数
 wait 延迟执行毫秒数
 type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
 */
export const throttle = (fn, wait = 1000, type = 1) => {
	let previous = 0;
	let timeout;
	return function() {
		let that = this;
		let args = arguments;
		if (type === 1) {
			let now = Date.now();
			if (now - previous > wait) {
				fn.apply(that, args);
				previous = now;
			}
		} else if (type === 2) {
			if (!timeout) {
				timeout = setTimeout(() => {
					timeout = null;
					fn.apply(that, args)
				}, wait)
			}
		}
	}
}

页面中使用

//先引入
import {debounce} from '@/utils/xxx.js'
//方法中使用
methods: {
			你定义的事件名:debounce(()=>{
				//你的代码逻辑
			}),
		}

复制粘贴拿去用吧， 万变不离其中