前言
我们已经在前文学习过如何手搓"防抖"了！
然而仅仅就这够了吗？那肯定不是！假如我们在一段时间内，几乎同时收到了前端传输过来的大量请求，阁下又该如何处理呢？今天，就轮到我们"限流"大佬出场了！
今天就让我们来学习一下，如何手搓"限流"!
如何手搓"防抖"大家感兴趣的可以参考:手把手教你实现JavaScript手搓"防抖"优化代码----专业的事用专业的方法来做！ - 掘金 (juejin.cn)
正文
为什么要限流？
我们来想象一个场景：
假如我们JavaScript代码就像一个咖啡厅里面的服务员，而这个咖啡厅就是我们的后端服务器！而这个咖啡厅，非常的火爆！各种订单络绎不绝！现在，我们就要面临一个问题：我们要如何对我们的咖啡厅进行运营呢？
首先呢！我们要设定一个规则，而这个规则就是我们今天要手搓的"限流"！
想象一下，我们是咖啡里面唯一的服务员！作为当地小有名气的咖啡厅，顾客们纷至沓来！每个人都想要品尝我们的香醇咖啡，而我们又是唯一的服务员，顾客们会毫不犹豫地把所有订单一股脑全部赛给你！有的人要喝拿铁，有的人要喝美式，总之各种订单就是让你应接不暇！
现在，就像是我们的用户向我们的服务器发送请求一样，都希望立马都到后端服务器的响应，但是，作为唯一的一名服务员，我们一次只能为一个顾客服务，而不能同时为所有人倒咖啡，我们没有三头六臂！
有人就会说了，可以让他们排队呀！没错！
这就是为什么，我们要对前端用户的请求进行限流！我们需要设定规则，让顾客们排队一个一个来，后端服务器也是一样，比如每次我们只能处理五六个请求，而其他请求需要排队等待，这就是限流，控制了处理请求的速度，防止因为太多请求而导致我们的服务器"冒烟"
并且，我们也可以设置规则，比如在一秒钟之内，我们只处理一个请求，或者限制每个顾客每分钟只能发送一次请求，或者规定一段时间内处理的订单总数，这样我们可以更加有序地处理请求，确保每个人都能尽快的享受到他们请求的服务！
如何实现限流？ --手搓限流！
我们要如何实现限流这样一个操作呢？今天我们就制定一个规则！而这个规则就是我们的服务器在2s内只会处理一条请求！
代码怎么写呢？我们先给各位上代码！！！
html
<button id="btn">提交</button>
<script>
let btn = document.getElementById('btn')
function send(){
console.log('提交了');
}
btn.addEventListener('click',throttle(send,2000))
function throttle(fn,delay){
let prevTime = Date.now()
return function(){
if(Date.now()-prevTime>delay){
fn.apply(this,arguments)
prevTime =Date.now()
}
}
}
</script>这里是一个简单的限流！规定我们的后端服务器在2s内，只会处理一条请求！我们这个代码是怎么实现的呢？
我们来大家分析一下！
首先，我们在页面上实现了一个提交按钮，id为btn。
接下来，我们定义一个变量let btn获取到了页面id为btn的元素。
然后，我们定义了一个函数名为send()的函数，其中就是单单打印了一个提交了，旨在模仿我们前端向后端发送请求！
接着，我们在btn上添加了一个事件监听点击事件，如果点击的话，就调用throttle函数，里面传了两个参数send是之前定义的函数，2000是为定时器设置的时间，为两秒。
在throttle()函数体内，接收两个参数fn和delay，我们从上帝视角可以知道一个是函数体，一个是时间。
我们又定义了一个prevTime变量，使用Date.now()获取当前的时间戳，以毫秒为单位！
我用一个if条件判断！当前点击的时间，和我们上次点击记录的时间prevTime之差是否大于delay
如果不大于，就不会进入到我们的if条件语句里面去！
如果大于就进去函数体，执行里面的逻辑！调用fn.apply接收执行上下文传输过来的参数！
最后更新prevTime为现在的时间戳！这样我们一个限流的效果就实现啦！我们来看看效果！
限流在JavaScript中的好处总结！
在Web开发中，特别是在处理用户交互或异步操作时，经常会遇到需要控制某个函数的执行频率的情况。这时，限流就成为一个有力的工具。限流的主要目的是确保某个操作不会因为过于频繁而对系统性能或用户体验产生负面影响。在JavaScript中，实现限流通常通过控制函数的执行次数或执行时间间隔。
1. 节省带宽和服务器资源
限流可以帮助我们有效地控制客户端向服务器发送请求的频率。在一些需要频繁向服务器获取数据的场景中，如果没有限流机制，可能会导致不必要的大量请求，占用过多的带宽和服务器资源。通过限流，我们可以确保请求在一个可控的范围内，避免对网络和服务器造成过度负担。
2. 优化用户体验
在前端开发中，用户交互是一个重要的考虑因素。一些用户操作，比如输入搜索关键字、滚动页面等，可能触发一些异步操作，而这些异步操作又需要向服务器请求数据或执行一些计算密集型的任务。如果不进行限流，这些操作可能会导致页面响应缓慢，用户体验下降。通过限流，我们可以确保这些操作在合理的频率内执行，提升用户体验。
3. 防止恶意行为和攻击
限流还可以用于防止恶意行为和攻击。例如，在登录页面中，如果不对用户登录的请求进行限流，恶意用户可能会尝试使用暴力破解技术进行大量的登录尝试。通过限流，我们可以限制登录尝试的频率，增加系统对恶意行为的防范能力。
4. 控制资源的并发访问
在一些并发访问的场景中，比如文件上传、图片处理等，为了防止系统资源被过度占用，我们可以通过限流来控制并发操作的数量。这样可以确保系统在高负载时仍能保持稳定性，避免因过度并发而导致性能下降或系统崩溃。
5. 提高系统稳定性
通过合理的限流策略，我们可以避免系统因为过度的请求或并发操作而变得不稳定。限流有助于平滑系统负载，防止突发的流量冲击对系统造成严重影响，从而提高系统的稳定性和可靠性。
在JavaScript中，实现限流通常有多种方法，包括基于时间间隔的节流（throttle）和基于执行次数的防抖（debounce）等。选择合适的限流策略取决于具体的应用场景和需求。通过合理地使用限流，我们可以更好地管理系统资源，提高系统的性能和稳定性，从而为用户提供更好的使用体验。
好了！我们有关限流的知识就讲到这里啦！其实我给大家写的案例还可以进行优化，比如如果我们的send请求函数中要接收参数怎么办?大家可以自己动手尝试一下！
我们今天的学习就到这里为止啦！欢迎大家评论留言哦~
点个小赞鼓励支持一下吧！🌹🌹🌹🌹