Js函数防抖

‌函数防抖（Debounce）‌是指在事件被触发后，延迟一段时间再执行函数。如果在延迟期间事件再次被触发，则重新计算延迟时间。只有当事件在设定的延迟时间内没有被再次触发时，才会执行函数。

代码如下：

function debounce(func, wait, immediate) {
	let timeout;
	return function() {
		let context = this;
		let args = arguments;
		if (timeout) clearTimeout(timeout);
		if (immediate) {
			var callNow = !timeout;
			timeout = setTimeout(() => {
				timeout = null;
			}, wait)
			if (callNow) func.apply(context, args)
		} else {
			timeout = setTimeout(function() {
				func.apply(context, args)
			}, wait);
		}
	}
};

函数防抖[func 函数,wait 延迟执行毫秒数,immediate true 表立即执行,false 表非立即执行,立即执行是触发事件后函数会立即执行，然后n秒内不触发事件才能继续执行函数的效果。

实现原理：

函数防抖的实现原理主要依赖于setTimeout。当事件被触发时，设置一个定时器，如果在定时器执行之前事件再次被触发，则清除之前的定时器并重新设置。只有当定时器执行时，函数才会被调用。

应用场景：

‌搜索框搜索输入‌：用户输入时，只需在最后一次输入完成后发送请求。

‌用户名、手机号、邮箱输入验证‌：确保用户输入完成后进行验证。

‌浏览器窗口大小改变‌：防止窗口大小改变时重复渲染。

‌vue中的表单输入管理‌：利用Vue的ref和防抖逻辑，高效管理用户输入，提升应用性能。

链接: https://fly63.com/course/34_2060