防抖和节流

防抖和节流

防抖节流图示

防抖源码

	// 防抖
			var btn = document.getElementsByName('button');
			btn.onclick = debounce(function () {
				console.log('给debounce做防抖');
			}, 200);

			function debounce(fn, delay) {
				var timer = null; //存定时器
				return function () {
					if (timer) {
						clearTimeout(timer);
						timer = null;
					}
					timer = setTimeout(fn, delay);
				};
			}

过程分析

第一次点击时 进入debounce函数，此时timer为null 创建一个定时器 延迟时间为200毫秒

在100毫秒时点击按钮，进入debounce函数，此时timer存储有值 则进入if判断 清除当前定时器 将timer设置为null

再次点击按钮， 进入debounce函数，此时timer为null 创建一个定时器 延迟时间为200毫秒

在100毫秒时点击按钮，进入debounce函数，此时timer存储有值 则进入if判断 清除当前定时器 将timer设置为null

无论点击多少次只有最后一次点击时候才会执行fn函数

节流源码

// 节流
			btn.onclick = throttle(function () {
				console.log('给throttle做节流');
			}, 1000);

			function throttle(fn, delay) {
				var flag = true;
				return function () {
					if (flag) {
						flag = false;
						setTimeout(function () {
							flag = true;
							fn();
						}, delay);
					}
				};
			}

过程分析

第一次点击按钮时 进入throttle函数，此时flag为true,进入if判断，修改flag为false,创建一个定时器，延迟时间为1000毫秒

当第200毫秒的时候再次点击按钮。此时定时器还未到时间没有执行，此时flag为false,返回空

当时间到1000毫秒时执行定时器内容，将flag改为true,执行fn函数

当时间为1024秒时候此时flag状态为true,进入if判断，修改flag为false,创建一个定时器，延迟时间为1000毫秒

步骤同上…

在定时器定义的延迟时间内 无论点击多少次都不会执行，直到时间到会执行一次