携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 9 天，点击查看活动详情
start
节流(throttle),减少流量，短时间内触发多次，我每隔一段时间触发一次;
手写
节流
还是之前的输入框输入事件的案例，来手写一个版本。需求呢：短时间输入多次内容，我每隔 1 秒触发一次
<!DOCTYPE html>
<html lang="en">
<body>
<input type="text" id="in" />
<script>
var input = document.querySelector('#in')
let say = function (e) {
console.log('值改变事件', +new Date())
}
input.addEventListener('keydown', throttle(say, 1000))
function throttle(fn, wait) {
// 1. 和防抖类似，接收两个参数：函数，间隔时间
// 2. 定义一个变量存储定时器
var timer
// 3. 定义一个变量存储第一次执行的时间
var start = 0
return function () {
// 4. 获取当前时间
var now = +new Date()
// 5.由于要使用定时器，所以这里存储一下 this 和 arguments
var that = this
var arg = arguments
// 6.是否满足节流的时间限制
if (start + wait <= now) {
// 7. 如果之前有定时器 清除
if (timer) {
clearTimeout(timer)
timer = null
}
// 8. 满足条件，存储一下当前时间，然后允许执行
start = now
fn.apply(that, arg)
} else if (!timer) {
// 9.如果不满足节流限制，且没有定时器，添加一个定时器
timer = setTimeout(function () {
// 10. 定时器中需要记录定时器执行的时间，
start = now
fn.apply(that, arg)
}, wait)
}
}
}
</script>
</body>
</html>
手写防抖的总结：
- start 需要设置默认值 0；不然在
start + wait中会返回 NaN +new Date()算是第一次接触，简单来说效果等同于new Date().getTime, 作用就是：获取当前时间的时间戳；- 其次就是 if 中的逻辑可能一开始不好理解，简单来说，满足时间限制，执行函数；不满足时间限制添加一个定时器稍后执行。
总结：
防抖节流，
防抖是，一段时间内多次触发只执行一次。 节流是，一段时间内多次触发，按时间段执行。
同样是输入框的键盘事件，两者具体使用谁，还是需要看具体的业务场景。本质都是对高频触发的事件做的优化。
end
- 加油
