为什么要限定变乱的频繁触发，以及怎样做限定：
1.debounce 防抖
2.throttle 节省
本日重点讲讲节省的实现。
节省
节省的原理很简单：
假如你连续触发变乱，每隔一段时间，只实行一次变乱。
根据初次是否实行以及竣过后是否实行，结果有所差异，实现的方式也有所差异。
我们用 leading 代表初次是否实行，trailing 代表竣过后是否再实行一次。
关于节省的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。
使用时间戳
让我们来看第一种方法：使用时间戳，当触发变乱的时间，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，假如大于设置的时间周期，就实行函数，然后更新时间戳为当前的时间戳，假如小于，就不实行。
// 第一版function throttle(func, wait) { var context, args; var previous = 0; return function() { var now = +new Date(); context = this; args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } }}container.onmousemove = throttle(getUserAction, 1000);我们可以看到：当鼠标移入的时间，变乱立即实行，每过 1s 会实行一次，假如在 4.2s 制止触发，以后不会再实行变乱。
使用定时器
接下来，我们讲讲第二种实现方式，使用定时器。当触发变乱的时间，我们设置一个定时器，再触发变乱的时间，假如定时器存在，就不实行，直到定时器实行，然后实行函数，清空定时器，如许就可以设置下个定时器。
// 第二版function throttle(func, wait) { var timeout; var previous = 0; return function() { context = this; args = arguments; if (!timeout) { timeout = setTimeout(function(){ timeout = null; func.apply(context, args) }, wait) } }}我们可以看到：当鼠标移入的时间，变乱不会立即实行，晃了 3s 后终于实行了一次，以后每 3s 实行一次，当数字表现为 3 的时间，立即移出鼠标，相称于约莫 9.2s 的时间制止触发，但是依然会在第 12s 的时间实行一次变乱。
以是比力两个方法：
- 第一种变乱会立即实行，第二种变乱会在 n 秒后第一次实行
- 第一种变乱制止触发后没有办法再实行变乱，第二种变乱制止触发后依然会再实行一次变乱
双剑合璧
那我们想要一个什么样的呢？
有人就说了：我想要一个善始善终的！就是鼠标移入能立即实行，制止触发的时间
还能再实行一次！
以是我们综合两者的上风，然后双剑合璧，写一版代码：
// 第三版function throttle(func, wait) { var timeout, context, args, result; var previous = 0; var later = function() { previous = +new Date(); timeout = null; func.apply(context, args) }; var throttled = function() { var now = +new Date(); //下次触发 func 剩余的时间 var remaining = wait - (now - previous); context = this; args = arguments; // 假如没有剩余的时间了或者你改了体系时间 if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; func.apply(context, args); } else if (!timeout) { timeout = setTimeout(later, remaining); } }; return throttled;}我们可以看到：鼠标移入，变乱立即实行，晃了 3s，变乱再一次实行，当数字
变成 3 的时间，也就是 6s 后，我们立即移出鼠标，制止触发变乱，9s 的时
候，依然会再实行一次变乱。
优化
但是我偶然也希望无头有尾，或者有头无尾，这个咋办？
那我们设置个 options 作为第三个参数，然后根据传的值判定到底哪种结果，
我们约定:
leading：false 表现禁用第一次实行
trailing: false 表现禁用制止触发的回调
我们来改一下代码：
// 第四版function throttle(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : new Date().getTime(); timeout = null; func.apply(context, args); if (!timeout) context = args = null; }; var throttled = function() { var now = new Date().getTime(); if (!previous && options.leading === false) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } }; return throttled;}取消
在 debounce 的实现中，我们加了一个 cancel 方法，throttle 我们也加个 cancel 方法：
// 第五版 非完备代码，完备代码请检察末了的演示代码链接...throttled.cancel = function() { clearTimeout(timeout); previous = 0; timeout = null;}...注意
我们要注意 underscore 的实现中有如许一个标题：
那就是 leading：false 和 trailing: false 不能同时设置。 假如同时设置的话，比如当你将鼠标移出的时间，由于 trailing 设置为false， 制止触发的时间不会设置定时器，以是只要再过了设置的时间，再移入的话，就会 立即实行，就违背了 leading: false，bug 就出来了，以是，这个throttle 只有三种用法：
container.onmousemove = throttle(getUserAction, 1000);container.onmousemove = throttle(getUserAction, 1000, { leading: false});container.onmousemove = throttle(getUserAction, 1000, { trailing: false});至此我们已经完备实现了一个 underscore 中的 throttle 函数，恭喜，撒花！ |
