节流和防抖的说明和实现
程序员文章站
2024-01-31 14:24:34
...
在各个平台搜索“节流和防抖”，各种教程已经说的很多了，但是我之前刚接触节流和防抖的时候，还是很不理解，因为有的教程是互相引用直接复制粘贴的，看完不仅不知所以然，而且更迷茫了。
其实理解之后，我们会发现节流和防抖的概念和用法是很简单的。为了避免新手小白继续踩坑，我来一个浅显的说明和简单的实现。
说明
节流:
(暂时自定义时间为3s)
第一次点击立刻触发事件,此后点击时间与上次触发事件的时间大于3s才会触发
就像纸条经过打孔机,虽然纸条一直在向前滚动(相当于一直在点击),但是打孔机是每隔3s打一个孔(相当于每3秒触发一次事件)
防抖:
(暂时自定义时间为500ms)
点击后不触发事件,等待500ms后触发,在这500ms内,如果有新的点击,则清除原先的已等待时间,从新等待500ms
就像消消乐游戏(开始就相当于点击了一次),5秒钟内不能成功进行一次消除(等待5s后触发),游戏结束(触发事件)
5秒内有成功的消除(相当于新的点击),则从成功消除的时间起再等待5s结束(相当于清除原先的等待时间,从新等待5s)
实现
怎么实现功能呢?
把点击事件和请求事件分离开
点击之后根据条件触发请求
节流:
点击后进行判断当前时间戳与初始时间戳是否大于3s
大于3s就进行请求,并且将初始时间戳改为当前时间戳
小于3s就不请求
防抖:
点击后500ms不做请求操作
500ms内如果没有点击就进行请求
如果有点击就不请求.
demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
button {
width: 150px;
height: 30px;
background-color: rgb(255, 187, 187);
border-radius: 10px;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<button onclick="throttle(3000)">节流</button>
<button onclick="debounce(500)">防抖</button>
<script type="text/javascript">
// 节流初始时间戳
let pastDate = new Date().valueOf()
// 点击节流按钮触发函数
function throttle(time) {
console.log('点击节流按钮啦')
let nowDate = new Date().valueOf()
if (nowDate - pastDate > time) {
console.log('节流情况下发送请求啦')
pastDate = new Date().valueOf()
}
}
// 防抖初始变量
let debouncTtimeout
// 点击防抖按钮触发函数
function debounce(time) {
console.log("点击防抖按钮啦")
clearTimeout(timeout)
debouncTtimeout = setTimeout(function () {
console.log("执行防抖操作")
}, time)
}
</script>
</body>
</html>
上一篇： json返回前端的乱码问题
下一篇： 一个简单的汇编程序