防抖与节流，我的理解&应用场景
防抖
第一印象
哇，这个知识点可以有，防止窗口抖动欸(真NB)。
学习过后
还是浅薄了呀，原来防抖是这样玩的哇。
出现的意义：对绑定了input事件的元素节点(input标签)，多次执行键盘操作时，每次输入数据都会触发一次事件，若是在此时还对更新的数据实时发送了ajax请求(完了，小服务器不会炸吧),这怕是要对服务器有着高要求吧。
理解：(对防抖的期望)在单位时间内，若多次执行键盘操作，只会在最后一次发送ajax请求。
友好版：拿出单身二十年的手速，防抖对你绝对友好，输入完说不定服务器只执行了一次。(怕不是服务器的托吧~)。
应用场景：电商平台输入框输入后，根据关键字发送请求，检索数据库，显示可能心仪的商品。
代码帮助理解(可以看看注释哟)
<body>
设置防抖输入：<input class="ipt" type="text">
未设置防抖输入：<input class="repIpt" type="text">
<script>
const ipt = document.querySelector('.ipt')
const repIpt = document.querySelector('.repIpt')
let timerId = null
ipt.addEventListener('input', function (e) {
clearTimeout(timerId)
timerId = setTimeout(() => {
console.log('有防抖：'+e.target.value);
}, 200);
})
repIpt.addEventListener('input', function (e) {
console.log('无防抖：'+e.target.value);
})
</script>
</body>
节流
请允许我接续展露自己的浅薄
开源节流？哦豁，那岂不是很不错。
学习过后
emmm，好像和我理解的有点搭边欸，就说嘛，怎么能一直浅薄下去呢(傲娇)。
出现的意义：滚动事件这类高频触发的事件，关键代码执行时(创建变量，函数操作等)不断的开辟内存空间造成内存浪费(为啥就要高频触发呢？)，为了解决这种问题，节流就应运而生了。
理解：(对节流的期望)对高频触发的事件，通过减少关键代码的执行次数，从而减少内存浪费。
友好版：众生平等，触发再频繁，也给我乖乖每隔一段固定的时间(时间老打成事件怎么解)才执行一次。
应用场景：高频触发的事件(滚动)减少关键代码执行次数；例如电商网站的电梯导航：每次滚动到指定位置，对样式进行更改，提高用户体验（吐槽：用户体验关我什么事，我还想提高程序员体验呢。。。)。
代码展示(帮助理解)
<body>
<div class="scrl" style="height: 2000px;"></div>
<script>
const scrl = document.querySelector('.scrl')
let oldTimer = new Date()
let i = 0
let j = 0
window.addEventListener('scroll', function (e) {
console.log('i：' + i++);
const newTimer = new Date()
if (newTimer - oldTimer >= 100) {
oldTimer = newTimer
console.log('j：' + j++);
}
})
</script>
</body>`
