持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
本文仅介绍了三个常用的节流小技巧————防抖、节流、图片懒加载，都附赠的代码哦
1. 防抖
防抖 ---> 一段时间内只触发只触发最后一次（搜索框）
防抖流程 :
(1)声明一个全局timeID存储定时器id
(2)每一次触发事件,先清除上一次定时器，以本次触发为准
(3)开启本次定时器
<input type="text" placeholder="请输入文本">
<script>
let timeID = null
document.querySelector('input').addEventListener('input',function(){
clearTimeout(timeID)
/*
fuction函数 : 定时器的this -> window
箭头函数 : 访问上一级的作用域的this -> input
*/
timeID = setTimeout(()=>{
console.log(`用户输入${this.value}`)
},1000)
})
</script>
2. 节流
节流 ---> 一段时间内只触发一次（轮播图左右切换，滚动条事件 onscroll，鼠标移动 onmousemove）
节流流程 ：
(1) 声明全局变量存储 上一次触发交互时间
(2) 每一次触发事件, 获取当前时间
(3) 判断 当前时间 - 上次触发事件 >= 节流间隔
(4) 存储本次触发事件，用于下一次判断
<style>
body{
width: 3000px;
height: 3000px;
}
</style>
<script>
let lastTime = null
// 页面滚动条事件
let i = 1
window.onscroll = function(){
let currentTime = Date.now() // (2) 获取当前时间
// (3) 判断 当前时间 - 上次触发事件 >= 节流间隔
if(currentTime - lastTime >= 500 ){
console.log(`第${i++}次触发`)
lastTime = currentTime
}
}
</script>
3. 图片懒加载
是一种常见的性能优化的手段
核心思路： 就是图片不在可视区的时候不给他设置src属性，因为只要给他设置src属性就会发送请求
这里面有个难点就是如何监听图片是否出现在可视区域useIntersectionObserver方法（el，箭头函数） isIntersecting
