[发明专利]一种防抖与节流封装方法及系统

说明书

本发明公开了一种防抖与节流封装方法及系统，涉及JavaScript性能优化技术领域，所述方法包括以下步骤：步骤1、通过使用JavaScript，监听特定事件的发生；步骤2、当监听到特定事件发生时，通过函数防抖和函数节流执行事件处理函数，所述函数防抖可以实现首次立即执行。本发明使用简洁，可以实现大多数防抖的需求，比如滚动事件，调整大小事件，按钮点击事件等；易于拓展：基于此函数进行进一步封装，比如封装成Vue，React组件等。

技术领域

本发明涉及JavaScript性能优化技术领域，尤其涉及一种防抖与节流封装方法及系统。

背景技术

在前端中，当进行窗口的调整大小(resize)，滚动(scroll)，输入(input)，以及地图缩放(zoom)与设置范围(extent)事件的触发，这些操作通常都存在频率高，并且影响性能，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。其实我们在业务中也不需要频繁请求，只需要每隔一段时间去获取所需的信息，因此这种场景下我们可以使用setTimeout设置时间间断，从而达到限制频繁请求的操作，这个就是JavaScript防抖(debounce)与节流(throttle)。

函数防抖(debounce)：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

实现该功能的代码为：

此函数在使用的过程中存在以下的缺点：

如果用户调用该函数的间隔小于waitTime的情况下，上一次的时间还未到就被清除了，并不会执行函数。当应用于input的搜索时，我们希望当用户输入完成补全项时再进行查询，当用户没有输入完，但waitTime时间已到的时候不执行函数；当应用到比如点击按钮，我们希望点击第一下的时候立即执行，当后面多点的时候进行防抖执行；而该函数是实现不了的。

因此，本领域的技术人员致力于开发一种防抖与节流封装方法及系统，采用防抖和节流的方式来减少调用频率，同时又不影响实际效果。

发明内容

有鉴于现有技术的上述缺陷，本发明所要解决的技术问题是如何提供一种防抖与节流封装方法及系统，采用防抖和节流的方式来减少调用频率，同时又不影响实际效果。

为实现上述目的，本发明提供了一种防抖与节流封装方法，所述方法包括以下步骤：

步骤1、通过使用JavaScript，监听特定事件的发生；

步骤2、当监听到特定事件发生时，通过函数防抖和函数节流执行事件处理函数，所述函数防抖可以实现首次立即执行。

进一步地，所述步骤1中的所述特定事件包括窗口调整大小、滚动、输入、按钮点击、地图缩放和设置范围中的一种或多种。

进一步地，所述步骤2中的所述函数防抖包括立即执行选项，以实现首次立即执行事件处理函数。

进一步地，所述步骤2中的所述函数防抖包括延迟函数，所述延迟函数通过设定定时器，使用缓存的上下文和参数，延迟执行事件处理函数。

进一步地，所述步骤2中所述函数防抖具体包括以下步骤：

步骤2.1.1判断是否已创建延迟函数，如果没有，创建延迟函数，否则，清空定时器，重新设定延迟函数；

步骤2.1.2判断立即执行选项是否为真，如果为真，调用事件处理函数，否则，缓存上下文和参数，执行延迟函数。

进一步地，所述步骤2中所述函数节流具体包括以下步骤：

步骤2.2.1使用开始时间、当前时间和延迟时间来计算剩余时间；