函数防抖
- 函数防抖：单位时间内，频繁触发事件，只会触发最后一次
<!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>
</head>
<body>
<button>按钮</button>
<script>
// 防抖: 频繁触发某个操作时，只执行最后一次。
// 定时器的名称必须是全局变量，这样，进入事件里面，才能清楚上一次的定时器;
let timer;
// 获取元素，绑定事件
document.querySelector('button').onclick = function () {
// 取消之前的延时器
clearTimeout(timer);
// 利用定时器触发
timer = setTimeout(function () {
console.log('发送ajax...');
}, 5000);
}
</script>
</body>
</html>
</body>
</html>
这样只要你一直点击按钮,就一直不会打印在控制台上,点击后5秒内不在次点击就会打印
应用场景挺多的:输入框搜索自动补全事件,频繁操作点赞和取消点赞
函数节流
- 函数节流：单位时间内，频繁触发事件，只会触发一次
- 函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能
<!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>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次
2.经典应用场景 ： 滚动条事件
3.函数防抖流程 ：
3.1 声明全局变量存储上一次触发交互时间
3.2 每一次触发事件, 获取当前时间 与 上一次时间做比较。判断是否超过节流间隔
3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
*/
let lastTime = null
window.onscroll = function(){
//判断时间间隔
let currentTime = Date.now()
if( currentTime - lastTime >= 500 ){
console.log('执行滚动条事件处理代码')
//存储本次触发时间
lastTime = currentTime
}
}
</script>
</body>
</html>
无论你点击多少次,我设定的是0.5秒.在0.5秒内都只会触发这一次.
应用场景:购物网站的轮播图,1. 按钮点击事件...
