<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
height: 10000px;
}
</style>
</head>
<body>
<div></div>
<script>
function throttle(fn, wait) {
let _fn = fn, // 保存需要被延迟的函数引用
timer,
flags = true; // 是否首次调用
return function() {
let args = arguments,
self = this;
if (flags) { // 如果是第一次调用不用延迟，直接执行即可
_fn.apply(self, args);
flags = false;
return flags;
}
// 如果定时器还在，说明上一次还没执行完，不往下执行
if (timer) return false;
timer = setTimeout(function() { // 延迟执行
clearTimeout(timer); // 清空上次的定时器
timer = null; // 销毁变量
_fn.apply(self, args)
}, wait)
}
}
window.onscroll = throttle(function() {
console.log(22)
}, 500)
</script>
</body>
</html>
