前端 vue 函数节流 Throttle 函数防抖 debounce input 输入框 @input 事件处理 input 输入框 @input条件查询 性能优化

用法

输入框数字后四位小数校验，每次数据都要去执行方法，这样太消耗了。我们可以使用 函数防抖 (只执行最后一次) 输入最后一次开始触发方法。
其他应用场景是：一个输入框条件查询。每次输入一次调用一次服务查询。这样时间长消耗大。我们就可以使用 函数防抖 (只执行最后一次) 执行最后一次调用。减小服务开销。

<Input v-model.number="number" @input="NumberInput" style="width: 200px">

<script>
export default {
	data() {
		return {
			number:0,
		}
	},
	methods: {
		// number 验证
		NumberInput: debounce(function (value) {
			if (value && value.toString().includes(".")) {
				if (value.toString().split(".")[1].length > 4) {
					this.number = this.toFixed(value, 4)
				}
			}
		}, 100),
		toFixed(number, fractionDigits) {
			var times = Math.pow(10, fractionDigits);
			var roundNum = Math.round(number * times) / times;
			return roundNum.toFixed(fractionDigits);
		},
	}
}
	/**
	 * 函数节流
	 * @param fn
	 * @param interval
	 * @returns {Function}
	 * @constructor
	 */
	function Throttle(fn, t) {
		let last;
		let timer;
		let interval = t || 500;
		return function () {
			let args = arguments;
			let now = +new Date();
			if (last && now - last > interval) {
				clearTimeout(timer);
				timer = setTimeout(() => {
					last = now;
					fn.apply(this, args);
				}, interval);
			} else {
				last = now;
				fn.apply(this, args);
			}
		};
	}
	/**
	 * 函数防抖 (只执行最后一次点击)
	 * @param fn
	 * @param delay
	 * @returns {Function}
	 * @constructor
	 */
	function debounce(fn, t) {
		let delay = t || 500;
		let timer;
		return function () {
			let args = arguments;
			if (timer) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				timer = null;
				fn.apply(this, args);
			}, delay);
		};
	}
</script>