[JavaScript知识库]VUE 全局/局部注册 节流防抖 封装

VUE 封装 节流防抖

-----个人理解------
防抖
一定时间里进行第二次操作时，不仅不会操作，还会重新计时： 表单提交 ，按钮事件等
当一个事件触发后的n秒内执行,当n秒内再次触发事件,重新开始计算计时器,当n秒内重新反复触发,回调永远不会执行.
节流
规定时间后在进行操作： input输入框 实时搜索等
当事件被触发的n秒内只执行一次事件处理函数.

全局

1. 创建js文件 /utils/debouce.js

///防抖
let timeout, result;
const debouce = function(func) {
	let args = arguments;
	// console.log(args);
	if (timeout) {
		clearTimeout(timeout)
	}
	let callNow = !timeout
	timeout = setTimeout(() => {
		timeout = null;
	}, 1000)
	if (callNow) {
		// result = func.apply(this, args) //如this指向有问题再开启 并注释下一行
		result = func(...args)
	}
	return result
}
///节流
var timer;
const throttle = function(func, wait) {
	return function() {
		let context = this;
		let args = arguments;
		if (!timer) {
			timer = setTimeout(() => {
				timer = null;
				func.apply(context, args)
			}, wait)
		}
	}
} 

export default {
	debouce,
	throttle
}

2. main.js 引入

import debouce from "@/utils/debouce.js"
Vue.prototype.$debouce = debouce.debouce;
Vue.prototype.$throttle = debouce.throttle;

3. vue页面内使用

<input type="text" value="" v-model="inputtext" @input="$debouce(input)" />
<input type="text" value="" v-model="inputtext" @input="$throttle(input,500)" />

input:function() {
	console.log(this.inputtext);
}

注意： 通过 v-model 来获取实时数据 无法在 input内带参数获取input数据
如:@input="$throttle(input($event),500)"

单页面内引用

1. 创建js文件 /utils/debouce.js

/// 节流

function throttle(fn, delay) {
	var t = null,
		begin = new Date().getTime();
	//定义开始时间
	return function() {
		var _self = this,
			args = arguments,
			curr = new Date().getTime();
		clearTimeout(t);
		if (curr - begin >= delay) {
			//两次输入时间间隔小于定义的延迟时间则触发
			fn.apply(_self, args);
			begin = curr
		} else {
			t = setTimeout(function() {
				fn.apply(_self, args)
			}, delay)
		}
	}
}

export default {
	throttle
}

原文地址
https://blog.csdn.net/weixin_44429874/article/details/108984293?spm=1001.2014.3001.5502

2. 页面内 引入

import throttle from "@/utils/debouce.js"

3. vue页面内使用

<input type="text" value="" @input="input" />

input: throttle.throttle(function(e) {
		console.log(e);
		// 参数 e 为 input 组件 内置方法 @input 所带参数
		// 此方式可以随意给函数添加参数
},500)

学习笔记 , 欢迎交流