Javascript--防抖与节流
1.防抖
多用于搜索框输入即时发送请求频率控制，可以实现输入停顿指定时间后发送网络请求的功能，无操作n秒后发送请求，遵循的规则是先等待，后执行。
2.节流
多用于解决下拉加载等操作时防止重复操作的需求，第一次操作立即执行，等待n秒后才会继续执行新的操作(等待时间内的操作被忽略），遵循的规则是先执行，后等待。
<!--
防抖 触发后在n秒只执行一次，n秒内再次触发则重新计算
节流：连续发生的事件n秒只执行一次
-->
<html>
<head>
<title>防抖与节流·</title>
<style>
#countent {
font-size: 60px;
text-align: center;
height: 200px;
width: 100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="countent">0</div>
<script>
let num = 0;
let countent = document.getElementById('countent');
function count() {
num++;
countent.innerText = num;
}
//防抖：输入后停顿一秒再执行
function waitTo(func, wait) {
let timeout;
return function() {
//每次触发清除上一个计时器
clearTimeout(timeout);
//重新开始计时器
timeout = setTimeout(function() {
//只有计时器维持1s以上没被清除才能执行
func.apply(this);
}, wait);
}
}
//countent.onmousemove = waitTo(count, 500);
//节流 输入完毕立即执行，2s后才能触发
//1.计时器实现
function noWait(func, wait) {
let timeout = null; //设置初始值
return function() {//闭包：能够读取其他函数内部变量的函数
if (!timeout) {
func.apply(this);
timeout = setTimeout(function() {
timeout = null;
clearTimeout(timeout);
}, wait);
}
}
}
//2.时间戳实现
// function noWait(func, wait) {
// let pre = 0;
// return function() {
// let now = Date.now();
// if (now - pre > wait) {
// func.apply(this);
// pre = now;
// }
// }
// }
countent.onmousemove = noWait(count, 1500);
</script>
</body>
</html>
