2020-11-23

节流和防抖案例

有不对的地方希望大佬指出来

防抖控制次数，节流控制频率

	<div id="box"></div>
	防抖
	//防抖是通过添加延时器 控制次数 当有新的延时器被触发的 时候 清空上一次的延时器 重新赋值 来达到控制次数的操作。
	let o_box = document.getElementById('box');
	let num1 = 0;
	let num2 = 0;
	let timer = null;
	o_box.onclick = function() {
		clearTimeout(timer)
		timer = setTimeout(() => {
			o_box.innerHTML = num1++
		}, 1000)
	}
	let o_pox = document.getElementById('pox'); //定义一个开关
	function fn() {
		o_pox.innerHTML = num2++;
	}
	节流
	//节流思想：如果在函数执行的时间内再次被触发，不在继续添加事件 只有当这次结束以后才可以添加新的事件
	//将timer声明在外面 只会在内存中开辟一个空间  如果在函数里面声明 每次调用函数就会重新开辟一次内存空间 每次的timer的值是不一样的
	let previous = null; //声明用来记录上一次点击时间的变量
	o_pox.onclick = function() {
		let time = 2000;
		var now = new Date().getTime() // 获取当前点击的时间
		//如果是第一次点击 上一次时间不存在 将现在的时间赋给previous
		if (!previous) {
			previous = now;
		}
		//如果时间间隔大于规定的时间  节流分为立即执行版本和延迟执行版
		注释掉的是延迟版本
		if (now - previous > time) {
			clearTimeout(timer);
			// timer = setTimeout(() => {
			// 	fn()
			// }, 1000)
			fn()
			previous = now;
		} else {
			clearTimeout(timer)
			timer = setTimeout(() => {
				fn()
			}, 1000)
		}
	}