防抖
1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次。
2.经典应用场景 ： 输入框输入事件 input事件。
作用：减少触发输入的频率，提高代码的性能
3.函数防抖流程 ：
3.1 声明全局变量存储定时器ID
3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
3.3开启定时器
<!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>
<input type="text" placeholder="请输入文本">
<script>
// 1 声明全局变量存储定时器ID
let timeID = null
document.querySelector('input').addEventListener('input',function(){
// 2 每一次触发事件, 先清除上一次定时器
clearTimeout(timeID)
// 3开启定时器 function函数，定时器指向window
// 箭头函数：访问的是上级的作用域this=>input
timeID = setTimeout(()=>{
console.log(`您的搜索内容为：${this.value}`);
},5000)
})
</script>
</body>
</html>
节流
1.函数节流 : 单位时间内，频繁触发事件，只会触发一次
2.经典应用场景 ： 滚动条事件scroll事件 鼠标移动mousemove事件
3.函数节流流程 ：
3.1 声明全局变量存储上一次触发交互时间
3.2 每一次触发事件, 获取当前时间 - 上一次时间。判断是否超过节流间隔
3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
<!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 声明全局变量存储上一次触发交互时间
let listTime = null
// 页面滚动事件
let i = 1
window.onscroll = function(){
// (2)获取当前时间
let currentTime = new Date()
// (3)判断 当前时间 - 上次触发的时间 >= 节流间隔
if(currentTime - listTime >= 500){
console.log(`第${i++}次触发`)
//(4)存储本次触发时间。
listTime = currentTime
}
}
</script>
</body>
</html>
