什么是节流？
当我们在执行某个连续操作时，例如输入框中输入内容进行搜索，我们并不希望每输入一个字符就去触发一次将请求，这时我们可以通过某种手段去减少请求发送的次数，这个就是节流。节流就是控制事件触发的次数
节流的使用场景
- scroll事件，每隔一段时间去计算一次位置信息
- input输入框实时搜索并发送请求获取数据，我们每隔2s发送一次请求。
- ...................等
如何实现节流？
根据节流的原理，我们通过计算本次与上次事件触发的时间间隔，如果这个间隔大于了我们设定的间隔时间，就去发送一次请求。
代码如何实现？
如下：
<!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>节流</title>
</head>
<body>
<input type="text" />
<!-- 使用场景
滚动scroll事件，每隔1s进行一次位置计算
input输入框实时搜索并发送请求展示下拉列表，每隔1s发送一次请求
-->
<script>
// 节流：减少一段时间内事件的触发频率，例如：2s发一次请求；
// 只有当上一次触发时间和这次触发时间间隔大于2s之后才会去发送一次请求
let ipt = document.querySelector("input");
const throttle = (()=> {
let lastTime = 0;
return ((callback, time = 800)=> {
// 获取本次事件触发的时间戳
let nowTime = new Date();
if (nowTime - lastTime > time) {
callback();
lastTime = nowTime;
}
})
})();
ipt.addEventListener("input", function () {
throttle(()=> {
if (ipt.value == "") {
return;
}
// 发送请求
console.log(ipt.value)
},2000)
})
</script>
</body>
</html>
