函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="height: 3000px"></div>
</body>
<script src="./throttle.js"></script>
<!-- <script src="../underscore.js"></script> -->
<script>
var throttle = _.throttle(function() {
console.log('hello throttle')
}, 1500/* , {
trailing: false
} */)
window.onscroll = throttle
// 没有参数 表示 默认会执行两次，一次立即执行，一次等待wait毫秒后执行
// leading false 表示 阻止立即执行，等待wait毫秒后调用
// trailing 先立即执行，之后再触发时若过了wait毫秒则执行
// 两个参数不能同时设置为false
// 拖拽时使用
// 指定时间后调用
</script>
</html>实现
var _ = {}
_.now = Date.now
_.throttle = function (func, wait, options) {
var args, result, lastTime = 0 // 初始值
var timeOut = null
if (!options) {
options = {}
}
var later = function () {
// 执行一次之后，如果设置了leading为false，需要把lastTime设为0，为了能够执行lastTime = now
// 没有设置则lastTime为当前设置为当前时间
lastTime = options.leading === false ? 0 : _.now()
console.log("later-lasttime: ", lastTime)
timeOut = null // 一次执行后清除定时器，为了下次能够执行
result = func.apply(null, args) // 执行回调
return result
}
return function () {
// 当前执行节流函数的时间
var now = _.now()
args = arguments
// lastTime为0表示是首次执行
if (!lastTime && options.leading === false) { // 设置了leading为false
lastTime = now // 执行此步后remaining为wait
}
// 配置了Leading 首次执行remaining 为wait
// now - lastTime为两次触发节流函数之间的间隔
// 两次之间间隔小于wait时，remaining为正值
// 配置了trailing 直接执行下面代码，第一次lastTime为0，remaining会是负数
// 只有当now - lastTime间隔大于wait时，remaining才为负数
console.log("lasttime: ", lastTime)
console.log("now: ",now)
var remaining = wait - (now - lastTime)
console.log(timeOut)
console.log(remaining)
if (remaining <= 0) {
// 设置trailing为false
if (timeOut) {
clearTimeout(timeOut)
timeOut = null
}
lastTime = now // 第一次执行后，把now赋值给lastTime
result = func.apply(null, args) // 立即执行
} else if (!timeOut && options.trailing !== false) { // 设置了leading为false同时没有设置trailing为false
// timeOut不为空 这时说明已经有定时函数，这时就不能再触发执行，如此实现了限流，即隔指定时间再执行，中间触发时都不执行
// timeOut为空 没有定时函数，并且options.trailing !== false 说明没有传入trailing
// 没有传入配置项时，会先立即执行过一次后，还没有定时器，会进这里
// 在remaining时间段后会再执行一次，即没有配置会执行两次，一次立即执行，一次是wait时间后执行
// 由于此时已经过了now - lastTime 所以是remaining时间后再执行，总体来看就是 一次立即执行，一次是wait时间后执行
timeOut = setTimeout(later, remaining) // 由于leading为false要实现隔wait时间调用，那么remaing值等于wait 那么now与lastTime就要相等
}
return result
}
}
发表回复