<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./02、节流的实现.js"></script>
<input type="text" />
<script>
const iptEle = document.querySelector("input");
let counter = 0;
const inputChange = function (event) {
console.log("1111------------", ++counter);
};
iptEle.oninput = throttle(inputChange, 3000, { leading: false, trailing: true });
</script>
</body>
</html>
/**
* 在规定时间内，不管触发多少次事件，只能执行一次
*/
function throttle(fn, interval, options = { leading: true, trailing: false }) {
const { leading, trailing } = options;
let timer = null;
// 记录上一次开始的时间
let lastTime = 0;
// 事件触发，真正执行的函数
const _throttle = function () {
// 获取当前事件的触发时间
const nowTime = new Date().getTime();
// 第一次不执行
if (!leading && !lastTime) lastTime = nowTime;
// 使用当前触发的时间和之前的时间间隔以及上一次开始的时间，计算出还剩多长时间需要去触发函数
const reaminTime = interval - (nowTime - lastTime);
if (reaminTime <= 0) {
if (timer) clearTimeout(timer);
timer = null;
// 真正触发函数
fn();
// 保留上次触发的时间
lastTime = nowTime;
return;
}
// 最后一次是否执行
if (trailing && !timer) {
const reaminTime = interval - (nowTime - lastTime);
timer = setTimeout(() => {
timer = null;
lastTime = !leading ? 0 : new Date().getTime();
fn();
}, reaminTime);
}
};
_throttle.cancel = function () {
if (timer) clearTimeout(timer);
timer = null;
lastTime = 0;
};
return _throttle;
}
2693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
