开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

文章内容

防抖函数封装
节流函数封装

一、文章介绍

在之前我向大家简单的介绍了一下防抖、节流两个函数方法的用处以及简单的封装了这两个函数，具体可见防抖、节流的介绍这一篇文章。本篇文章基于其的基础上，对两个函数进行一定的拓展，封装两个更完整的防抖、节流函数。

二、简单回顾一下防抖、节流

防抖和节流两个函数目的都是让存在持续触发的操作（如input事件、mouse相关的事件）减少触发频率，因为按照正常的思维，输入和鼠标移动事件有效的触发肯定是在最后几次。防抖和节流就很有效的解决了输入和鼠标移动中无效触发导致服务器压力增大的问题。

三、防抖与节流的区别

防抖与节流虽然目的类似，两者的核心都是使用setTiemout定时器来延迟事件函数的执行。但实现的方式还是有所不同的，大家在使用的时候再琢磨哪一种方式更加合适一些。函数防抖是通过不断的清除上一次执行设定的定时器，再生成新的定时器的方式来延迟函数执行，这种方式会导致只要用户在不停的操作，目标函数就永远不会执行，直到用户停止操作且等待所需延迟时间之后，函数才会执行一次。函数节流则是可以通过与上一次操作时间比对的方式，当本次操作的时间与上次操作时间间隔大于延迟时间时，就允许一次函数的执行，将本次执行时间覆盖上次执行时间，循环此操作。因此，函数节流使得函数在一定时间内一定会执行一次。相较而言，笔者更喜欢使用函数节流，因为可以使得用户在一定时间内得到页面的响应、反馈。当然，我们也可以对函数防抖进行拓展，使得它在第一次执行时先执行一次函数，再进行防抖操作。