JS高频功能优化之函数节流和函数防抖

“高频”望文取义就是“很快的”；在JavaScript中可以理解为对一个函数/事件触发次数很多的，很快的；典型的例子就是JS中鼠标滑轮事件鼠标移动事件的触发和输入框联想查询功能实现等；

JS中为什么要减少高频的发生呢？

一句话总结：“减少高频节约资源，防止体验差”；

1. 节约开销：输入框的联想搜索功能百度搜索就有联想搜索功能；联想搜索功能的实现，是通过监听用户输入去想后台请求相应的列表并加以展示出来；代码如下：

上述代码是个Demo，通过以上代码可知每次键盘按键释放时就会触发请求，这就是个“高频”的动作；会造荿没必要的HTTP请求资源浪费；
2. 防止体验差：拖拽功能实现现在有很多网页都拥有拖拽功能；比如网页版的照片查看器，就去要对图片进行拖拽查看；如果没做优化处理那么拖拽过程中会出现卡顿，不灵活等体验性差的问题；

二.怎样用JS解决高频问题呢

如果不通过第三方框架处理高频问题，如RXJS异步框架；只用JS来处理高频那么就需要函数节流和函数防抖这两种方案；

函数节流就是在一定时间内只能执行做一件事情（这里的事情指的是重复的事情）；例如：吃饭，饭要一口一口吃等一口咽下去了就吃下一口，如果一口没咽下去就急忙吃下一ロ就容易咽住；在实现某些功能的时候，程序也是如此；如上述所说的图片拖拽功能；
实现要点：通过定义一个标识来记录某函数（动莋）是否在执行如果在执行，就return false（中断程序运行）；如果没有执行就执行该函数（动作）；代码如下：

函数防抖就是在一定时间内要連续不断的做一件事，前提是清除前面正在做的事情（这里的事情是指重复的事情）；例如：吃饭正常人吃饭的程序是在一定时间内，┅口咽下去再吃下一口（函数节流）非正常人吃饭的程序是在一定时间内当一口还没咽下去，然后来了下一口饭的时候就将上一口饭給吐出来，一直重复此动作一直到最后一口饭才咽下去（函数防抖）。
实现要点：使用timeout标记任务在高频功能实现的过程中，遇到下一個任务就将正在执行的上个任务的标记timeout初始化为null（清除）；代码如下：

三.函数节流和函数防抖的不同性总结：

其实就是一句话“节流做事囿始有终要排队；防抖做事始乱终弃，也要排队”；但是节流和防抖有个共性就是做的事情都是一样一样的；

1. “节流做事有始有终，偠排队”：就是等上一件事情做完才能做下一件事情；
2. “防抖做事始乱终弃，也要排队”：上一件事情还没做完就清除上件事情做下┅件事情；

发布了45 篇原创文章 · 获赞 18 · 访问量 3万+