js优化--防抖

1.防抖函数的定义

在一定的时间间隔内,如果没有再次触发该函数,那么才会去执行函数体内的代码(例如发送网络请求)* 。

2.防抖函数简单版本的实现

// 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间在触发，则重新计算时间(后面触发的事件执行，替代了前面的事件)
			function debounce(fn, time) {
				let timeout = null; // 创建一个标记用来存放定时器的返回值
				return function() {
					clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
					timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 
						// 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
						fn.apply(this, arguments); //arguments是传入的参数
					}, time);
				};
			}

			function sayHi() {
				console.log('防抖成功');
			}

			var inp = document.getElementById('inp');
			inp.addEventListener('input', debounce(sayHi, 3000)); // 防抖