前端必会的“防抖”和“节流”方法

最近因为疫情隔离居家办公，闲着没事也在回忆和整合学过的知识，这里给大家分享几个有关“防抖”和“节流”方法，希望对大家有所帮助

1 前言

在前端开发过程中，会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件，如果每次触发都进行执行的话，会造成性能下降、后台的压力变大，那么此时就需要使用防抖和节流进行处理。

防抖和节流，见名思义：防抖是防止抖动，节流是节约流量。

2 防抖

防抖(Debounce) 指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

常见场景：点击按钮、拍照、下拉触底加载下一页等。

持续触发输入事件时，并不会立即执行func函数，而是在指定时间delay中没有再次触发事件时，才会进行延时执行func函数。

2.1 原始栗子(未进行防抖处理)

为了更加深入透彻地理解为什么要进行防抖处理，我们可以先体验不进行防抖的输入函数触发ajax实时请求的情况。

  没有进行防抖处理的：