函数节流和函数防抖(学习笔记)

1.函数节流

概念：函数节流是指一定时间内js方法只跑一次。比如高铁发车，只要在规定的时间点，不管有没有人上车，到点就走。

场景：数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

代码示例：

var ss = true
		$("#scroll").scroll(function() {
			if(!ss) {
				return
			}
			ss = false;
			setTimeout(function() {
				console.log("节流函数");
				ss = true;
			}, 300)
		})

函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。
 如果空闲，则可以正常触发方法执行。
 如果代码正在执行，则取消这次方法执行，直接return。

2.防抖函数

概念：函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

场景：函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

代码示例：

var timer = false;
		$("#scroll").scroll(function() {
			clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
			timer = setTimeout(function() {
				console.log("函数防抖");
			}, 300)
		})

函数防抖的要点，也是需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
 如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清掉，重新开始。
 如果计时完毕，没有方法进来访问触发，则执行代码。

3.执行结果