JS的节流和防抖
为何要有节流和防抖html
在前端开发中有一部分的用户行为会频繁的触发事件执行，好比窗口的resize、scroll，提交表单等。而事件处理函数调用的频率无限制，极可能致使界面卡顿，甚至浏览器的崩溃。函数节流和函数防抖就是为了解决相似需求而生的前端
函数防抖ajax
在事件被触发n秒后再执行回调，若是在这n秒内又被触发，则从新计时。也就是说，短期内不管事件触发多少次，老是只会执行最后一次事件的回调方法浏览器
看一个例子函数
运行结果spa
先来讲一下个人输入：1 》2 》3 》4 》5 》6 》7 》8 》9，输入9次，打印了9次，也就是说输入一次打印一次；
htm
能够看到，咱们只要按下键盘，就会触发此次ajax请求。不只从资源上来讲是很浪费的行为，并且实际应用中，用户也是输出完整的字符后，才会请求；blog
利用防抖事件
将请求函数 ajax 做为 setTimeout 的回调函数，设置 setTimeout 的时间为wait。须要一个变量 timeout 来保存当前所处的计时阶段，若是距离上次事件发生的 wait 时间段内再次发生该事件，那么把 timeout 清楚，即把上次的 setTimeout 事件清除，并从新计时；若是 wait 期间内没有再次触发相同事件，那么执行 fn 方法，即执行 ajax 方法。资源
运行结果
仍是先说下我是怎么输入这9个数字的：先输入123，停了1秒多（打印出123），再次输入456，又停了一秒多（打印出123456），输入789（1秒后，打印出123456789）；
当持续触发 keyup 事件时，ajax 请求函数只在keyup事件中止1000毫秒以后才会调用一次，也就是说，在持续触发keyup事件的过程当中，请求函数ajax一直没有执行；
能够看到，咱们加入了防抖之后，当你在频繁的输入时，并不会发送请求，只有你在指定时间间隔内没有输入时，才会执行函数。若是中止输入可是在指定时间间隔内又输入，会从新触发计时。
函数节流
引用1：当持续触发事件时，保证必定时间段内只调用一次事件处理函数。也就是说，预约一个函数只有在大于等于执行周期时才执行，周期内调用不执行；
引用2：规定在一个单位时间内，只能触发一次函数。若是这个单位时间内触发屡次函数，只有一次生效；
举个例子
当事件触发的时候，咱们设置一个定时器，再次触发事件的时候，若是定时器存在，就不执行，直到 wait 时间后，定时器执行函数，而且清空定时器，这样就能够设置下个定时器；
当第一次触发事件时，不会当即执行函数，而是延迟 wait 秒后才执行。然后再怎么频繁触发事件，也都是每 wait 时间才执行一次。当最后一次中止触发后，因为定时器的 wait 的延迟，可能还会执行一次函数；
运行结果
个人输入：在1秒以内输入 123，可是只打印出了 1，说明在 1 秒内触发屡次事件，只会执行一次。
适用场景
debounce（防抖）
一、search搜索联想，用户在不断输入值时，用防抖来节约请求资源
二、window触发 resize 的时候，不断地调整浏览器窗口大小会不断触发这个事件，用防抖来让其只触发一次
throttle（节流）
一、鼠标不断点击提交，一段时间内只让一次点击生效
二、监听滚动事件，好比是否滑到底部自动加载更多