<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖和节流</title>
</head>
<body>
<button id="jieliu">0</button>
<button id="fangdou" style="margin-left: 20px;">0</button><br/>
<button onclick="throttle(1000)">节流</button>
<button onclick="debounce(1000)">防抖</button>
</body>
</html>
<script>
let timer;
//节流
let jl = document.getElementById("jieliu")
let canRun = true;
const throttle=(time)=>{
if (!canRun) return;
canRun = false;
setTimeout(()=>{
jl.innerHTML++
canRun=true
},time)
}
//防抖
let fd = document.getElementById("fangdou")
const debounce =(time)=>{
clearTimeout(timer)
timer = setTimeout(()=>{
fd.innerHTML++
},time)
}
</script>
<!--
* 节流:
* 1000毫秒 10秒钟点100次 实际上只执行了10次 90次没成功。
* 截流,有规律执行点击时间,在约定时间内只能执行一次。约定时间内执行多次,也就只能成功一次。
* 场景:淘宝首页上拉加载
*
* 防抖:
* 1000毫秒 1秒钟点10次/100毫秒次<1000毫秒 实际上呢,他就成功了一次 99次没成功
* 在一定时间内,连续触发多次,但只会成功一次。
* 场景:
* 按钮仿重复提交、搜索框
-->
节流和防抖
于 2022-03-04 11:18:28 首次发布