一种防抖与节流封装方法及系统与流程

本发明涉及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使用开始时间、当前时间和延迟时间来计算剩余时间；

步骤2.2.2当剩余时间小于等于零时，执行事件处理函数，否则，在剩余时间后再执行事件处理函数；

步骤2.2.3如果在剩余时间内再次发生特定事件时，重新设定开始时间，转至步骤2.2.1。

进一步地，所述方法还包括将所述函数防抖和函数节流进行二次函数封装或函数式组件封装。

进一步地，所述函数式组件封装为vue组件封装或react组件封装。

另一方面，本发明还提供了一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。

再一方面，本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现上述方法的步骤。

本发明的有益效果：

1、本发明使用简洁，可以实现大多数防抖的需求，比如滚动事件，调整大小事件，按钮点击事件等；

2、易于拓展：基于此函数进行进一步封装，比如封装成vue，react组件等。

附图说明

图1是本发明的一个较佳实施例的流程示意图。

具体实施方式

以下参考说明书附图介绍本发明的多个优选实施例，使其技术内容更加清楚和便于理解。本发明可以通过许多不同形式的实施例来得以体现，本发明的保护范围并非仅限于文中提到的实施例。

如图1所示，本发明实施例提供了一种防抖与节流封装方法，所述方法包括以下步骤：

s1、通过使用javascript，监听特定事件的发生；

s2、通过函数防抖和函数节流执行事件处理函数。

本发明实施例提供的函数防抖包括一个立即执行选项，在防抖中可以实现首次立即执行，使得防抖用处更加广泛。以下具体说明其使用方法：

1、立即调用的实现：如果函数是立即执行的，就立即调用；如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦开始一个定时器，只要定时器还在，每次点击都重新计时。一旦点累了，定时器时间到，定时器重置为null，就可以再次点击了。

2、延时执行的实现：清除定时器id，如果是延迟调用就调用函数。

同时，还可以将防抖、节流函数封装到高阶组件中，如封装到vue函数式组件中，如果多个地方需要有防抖操作，调用公共组件即可。

实施例一

在vue中使用封装后的组件，具体的实现代码为：

其中，函数防抖debounce的具体实现代码为：

vue函数式组件封装防抖具体的实现代码为：

函数节流(throttle)：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如用水龙头放水，阀门一打开，水哗哗地往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

函数节流throttle具体的实现代码为：

在节流函数内部使用开始时间starttime、当前时间curtime与延迟时间delay来计算剩余时间remaining，当remaining<＝0时表示该执行事件处理函数了(保证了第一次触发事件就能立即执行事件处理函数和每隔delay时间执行一次事件处理函数)。如果还没到时间的话就设定在remaining时间后再触发(保证了最后一次触发事件后还能再执行一次事件处理函数)。当然在remaining这段时间中如果又一次触发事件，那么会取消当前的计时器，并重新计算一个remaining来判断当前状态；

函数防抖是将几次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流是使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

两者区别为：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

实施例二

以函数的方式使用：

(1)将函数防抖与节流写到utils.js，具体的实现代码为：

函数防抖

函数节流

(2)在组件中使用，以input事件为例，具体的实现代码为：

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。