最简单的理解就是 ：
- 一个是多次点击，只触发一次 （防抖）
- 一个是一个时间段，只触发一次 （节流） 防抖：
当我们在input输入框中 连续输入内 每输入一个字符 后台就会刷新一次 会导致后台服务器发生卡顿 影响客户体验 使用防抖之后 频繁的输入字符 只会触发最后一次
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次
2.经典场景 ： 输入框实时输入 oninput
* 减少触发输入的频率，提高代码性能
3.防抖流程 :
(1)声明一个全局timeID存储定时器id
(2)每一次触发事件,先清除上一次定时器，以本次触发为准
(3)开启本次定时器
*/
//(1)声明一个全局timeID存储定时器id
let timeID = null
document.querySelector('input').addEventListener('input',function(){
//(2)每一次触发事件,先清除上一次定时器，以本次触发为准
clearTimeout(timeID)
//(3)开启本次定时器
/*
function函数: 定时器this指向window
箭头函数 : 访问上级作用域this-> input
*/
timeID = setTimeout( ()=>{
console.log(`您的搜索内容为${this.value}`)
},500)
})
</script>
节流：
当鼠标点击的时候 每点击一次 后台就会有一次记录 使用节流之后 可以设置规定时间 在这个时间内 无论点击多少次 都只会触发一次 而且会记录下 本次的触发时间 用于下次的判断
<script>
/*
1.函数节流 : 单位时间内，频繁触发事件，只会触发一次
2.应用场景 : 降低高频事件触发频率
* 鼠标移动: onmousemove
* 滚动条事件: onscroll
3.节流流程
(1)声明一个全局变量记录 本次触发时间
(2)每一次触发事件的时候, 获取当前时间
(3)判断 当前时间 - 上一次触发事件 >= 节流间隔
(4)存储本次触发事件，用于下一次判断
*/
//(1)声明一个全局变量记录 当前触发时间
let lastTime = null
//页面滚动条事件
let i = 1
window.onscroll = function(){
//(2)获取现在时间
let currentTime = Date.now()
//(3)判断 当前时间 - 上一次触发事件 >= 节流间隔
if( currentTime - lastTime >= 500 ){
console.log(`第${i++}次触发`)
lastTime = currentTime
}
}
</script>
