js防抖 与 节流实现

防抖

• 概念：在某段时间间隔内，频繁触发一个函数时，只执行最后一次的触发。
• 代码实现：

			/**
			 * 防抖函数
			 * @param {function} fn 防抖的回调函数
			 * @param {number} interval 要延时的时间
			 */
			const debounce = function (fn, interval) {
				let timer, // 定时器
					firstTime = true, // 第一次执行
					__self = fn; // 保存需要被延时执行的函数引用
				return function () {
					let args = arguments,
						__me = this;
					if (firstTime) {
						// 如果第一次调用不需要延时执行
						__self.apply(__me, args);
						return (firstTime = false);
					}
					// 之后非第一次调用
					if (timer) {
						// 定时器存在，说明还在时间间隔内，从新开始延时调用
						clearTimeout(timer);
					}

					timer = setTimeout(() => {
						// 延时调用后，清除定时器
						clearTimeout(timer);
						// 延时一段时间执行
						__self.apply(__me, args);
					}, interval || 500);
				};
			};
复制代码

节流

• 概念：在某段时间间隔内，频繁触发一个函数时，在相同的时间间隔内只执行一次触发。
• 代码实现：

                        /**
			 * 节流函数
			 * @param {function} fn 节流的回调函数
			 * @param {number} interval 要延时的时间
			 */
			const throttle = function (fn, interval) {
				let timer, // 定时器
					firstTime = true, // 第一次执行
					__self = fn; // 保存需要被延时执行的函数引用
				return function () {
					let args = arguments,
						__me = this;
					if (firstTime) {
						// 如果第一次调用不需要延时执行
						__self.apply(__me, args);
						return (firstTime = false);
						console.log(123);
					}
					if (timer) {
						//如果定时器还在说明前一次执行还没有完成成
						return false;
					}
					timer = setTimeout(() => {
						clearTimeout(timer);
						timer = null;
						// 延时一段时间执行
						__self.apply(__me, args);
					}, interval || 500);
				};
			};
复制代码