JS中的函数节流（throttle）
一、什么是函数节流（throttle）
概念：限制一个函数在一定时间内只能执行一次。
举个栗子：坐火车或地铁，过安检的时候，在一定时间（例如10秒）内，只允许一个乘客通过安检入口，以配合安检人员完成安检工作。上例中，每10秒内，仅允许一位乘客通过，分析可知，“函数节流” 的要点在于，在一定时间之内，限制一个动作只能执行一次。
二、为什么需要函数节流
前端开发过程中，有一些事件或者函数，会被频繁地触发（短时间按内多次触发），最常见的例如，onresize，scroll，mousemove ,mousehover 等，这些事件的触发频率很高，不做限制的话，有可能一秒之内执行几十次、几百次，如果在这些函数内部执行了其他函数，尤其是执行了操作 DOM 的函数（浏览器操作 DOM 是很耗费性能的），那不仅会造成计算机资源的浪费，还会降低程序运行速度，甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外，重复的 ajax 调用不仅可能会造成请求数据的混乱，还会造成网络拥塞，占用服务器带宽，增加服务器压力，显然这个问题也是需要解决的。
三、函数节流如何解决上述问题
根据上面对问题的分析，细细思索，问题的解决方案就呼之欲出啦。
主要实现思路就是通过 setTimeout 定时器，通过设置延时时间，在第一次调用时，创建定时器，先设定一个变量 true, 写入需要执行的函数，第二次执行这个函数时，会判断变量是否 true,是则返回。当第一次的定时器执行完函数最后会设定变量为 false。那么下次判断变量时则为 false, 函数会依次执行。目的在于在一定的时间内，保证多次函数的请求只执行最后一次调用。
四、函数节流的代码实现
根据以上分析，我们对“函数节流”进行代码实现，如下：
(1) 方法一：时间戳方案
// 时间戳方案
function throttle(fn, wait) {
let pre = Date.now()
return function () {
let _this = this
let _arguments = arguments
let now = Date.now()
if (now - pre >= wait) {
fn.apply(_this, _arguments)
pre = Date.now()
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('mousemove', throttle(handle, 1000))
(2) 方法二：定时器方案
// 定时器方案
function throttle(fn, wait) {
let timer= null
return function () {
let _this = this
let _arguments = arguments
if (!timer) {
timer = setTimeout(function () {
fn.apply(_this, _arguments)
timer = null
}, wait)
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('mousemove', throttle(handle, 1000))
以上两种方法本人都亲自测试过，小伙伴们可以放心食用（注意，例子中函数触发方式为 mousemove, 鼠标在页面上移动，观察浏览器控制台的变化）,自己运行代码体验后，自然会更深刻的理解“函数节流”。
五、函数节流的使用场景
到此为止，相信各位应该对函数节流有了一个比较详细的了解，那函数节流一般用在什么情况之下呢？
- 懒加载、滚动加载、加载更多或监听滚动条位置；
- 百度搜索框，搜索联想功能；
- 防止高频点击提交，防止表单重复提交
目前遇到过的使用场景就是这些了，不过理解了原理，小伙伴可以把它用在需要用到它的任何场合，提高代码质量。
参考链接：https://segmentfault.com/a/1190000019577510，版权归原作者所有。
