前端基础算法（深度理解节流和防抖函数）
前端基础算法（深度理解节流和防抖函数）使用节流函数代码：可以看到，如果工程中直接去读取的话，由于读取操作过于频繁，将过多消耗浏览器的内存，从而导致浏览器的性能大大降低，因此我们需要使用节流函数来包装一下，从未降低读取频率。节流函数的应用场景一般是一些触发十分频发的事件，如：onscroll(鼠标滚动事件)，mousemove(鼠标移动事件)。经典案例：要求在鼠标移动时获取鼠标坐标先看不使用节流函数，直接读取鼠标位置的效果图：
1.前置知识首先，我们要知道节流函数和防抖函数都是用来解决高频发事件的问题，因为实际工程中如果让onscroll这些高频事件每一次触发都生效，那样将大大降低浏览器的性能。
- 既然两者的效果都一样，那为什么需要两个函数呢？
- 虽然两个最终的目的相同，但是两者降低事件生效频次的方式不同，因此会被应用于不同的场景。
定义：
节流函数就是在事件被触发后的规定时间n秒后再执行回调函数，如果在这n秒延时内事件又被触发，则该事件不会重新计时，依旧会按照第一次触发的时间计时，直到该事件生效完成。
实际应用场景：
节流函数的应用场景一般是一些触发十分频发的事件，如：onscroll(鼠标滚动事件)，mousemove(鼠标移动事件)。
经典案例：要求在鼠标移动时获取鼠标坐标
先看不使用节流函数，直接读取鼠标位置的效果图：
可以看到，如果工程中直接去读取的话，由于读取操作过于频繁，将过多消耗浏览器的内存，从而导致浏览器的性能大大降低，因此我们需要使用节流函数来包装一下，从未降低读取频率。
使用节流函数代码：
html代码：
Javascript代码：
效果图：
可以看出，用了节流函数之后浏览器在设定好的时间1秒内只读一次，这样大大增强了浏览器的性能，避免了频繁的去读取鼠标的位置。
3.防抖函数定义：
防抖函数就是在事件被触发的n秒后再执行回调函数，如果在这n秒延时内事件又被触发，则该事件会重新计时，也就是说会按照最后一次触发事件的时间开始计时。
实际应用场景：
防抖函数很常用的一个应用场景就是设计类似百度的搜索输入框，我们需要在用户全部内容输入完成后的n秒后再向服务器发送请求，而并不是说打一个字就发一次请求，如下图：
写个防抖函数加深理解：
html代码：
Javascript代码：
效果图：
可以看到，当我们在1s内不断触发点击按钮事件时，回调函数的延时会不断被重置，直到用户1内不再触发该点击事件，最后才执行我们的回调函数。
4.总结4.1两者相同点
防抖函数和节流函数都应用于高频触发的事件，作用都是降低事件的生效频次，从而提高浏览器性能。
4.2两者不同点
在规定延时时间内
节流函数生效第一次的触发事件
防抖函数生效最后一次的触发事件
这里是【IT人一直在路上】，关注我，学习更多前端技术，一起从小白走向高级工程师。
