1、定义
-
节流：在指定时间内只能触发一次，如果在指定时间内触发多次，只有一次生效。
-
防抖：在事件触发之后指定时间执行回调，如果在指定时间内再次触发则重新计算时间。
2、代码
-
代码解释：点击div元素，会打印内容。如果不进行处理一秒内点击几次即会打印几次内容，进行处理之后在一秒内点击多次也只会打印一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数防抖与函数节流</title>
<style>
#box {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 函数节流
let throttle = true;
let box = document.getElementById('box');
box.onclick = () => {
if (throttle) {
throttle = false
console.log('hello world');
setTimeout(() => {
throttle = true
}, 1000);
}
}
</script>
</body>
</html>
防抖：
3、案列
节流：比如在监听滚动事件（触底加载）、内容提交（Ajax请求）等用防抖来节约请求资源
防抖：
