js防抖 与 节流实现

·  阅读 50

防抖

  • 概念:在某段时间间隔内,频繁触发一个函数时,只执行最后一次的触发。
  • 代码实现
			/**
			 * 防抖函数
			 * @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);
				};
			};
复制代码
分类:
前端
收藏成功!
已添加到「」, 点击更改