前端表单防抖\节流

防抖

前端防抖是一种常用的技术，用于减少频繁触发的事件的性能消耗。当一个事件频繁触发时，可以使用防抖来限制事件的触发频率，只在指定的时间间隔内执行一次。

前端在utils报下创建一个validate.js文件，写如下函数

setTimeout和clearTimeout来控制定时器的执行和清除

/**
 * 函数防抖 (只执行最后一次点击)
 * @param fn  需要执行的函数
 * @param delay 延迟时间，不传则使用设定的500毫秒
 * @returns {Function}
 * @constructor
 */
 export const Debounce = (fn, t) => {
    // 如果不传延迟时间，则设置默认的延迟时间500毫秒
	const delay = t || 500
    // 使用 let 定义一个变量 timer 来存储定时器的ID
	let timer
	return function() {
		const args = arguments

   //如果之前已经有一个定时器在运行，则使用 clearTimeout 清除它，确保之前的函数不会被执行。
		if (timer) {
			clearTimeout(timer)
		}

//使用 setTimeout 设置一个新的定时器。当延迟时间过去后，它会执行一个函数，
// 该函数首先重置 timer 为 null，然后使用 apply 方法调用原始函数 fn，并传入之前保存的参数。
		timer = setTimeout(() => {
			timer = null
			fn.apply(this, args)
		}, delay)
	}
}

在提交表单处引入该文件，并调用该函数方法

import {Debounce} from '@/utils/validate'

// 不传延迟时间
submitForm : Debounce(function(formValue) {
  save(formValue).then(data => {
    this.$message.success('新增成功')
   // todo
  })
}),

// 或者传延迟1s
submitForm : Debounce(function(formValue) {
  save(formValue).then(data => {
    this.$message.success('新增成功')
   // todo
  })
}，1000),

节流

前端节流的主要方式是通过控制函数的执行频率来减少函数的调用次数。

常用的节流方式有定时器节流和时间戳节流。

定时器节流：在一定的时间间隔内，只执行一次函数。每次触发事件时，设置一个定时器，                  如果定时器存在则不执行函数，直到定时器触发后执行函数，并重新设置定时器。

时间戳节流：

                在一定的时间间隔内，只执行一次函数。每次触发事件时，记录当前的时间戳，如果当前时间戳与上次执行函数的时间戳的差值大于设定的时间间隔，则执行函数，并更新上次执行函数的时间戳。

// todo