CN115438284A - 页面防抖方法、装置、计算机设备以及存储介质 - Google Patents

Abstract

本申请涉及一种页面防抖方法、装置、计算机设备、存储介质和计算机程序产品涉及移动互联技术领域，其中，方法包括：响应页面访问事件，识别访问页面；从项目入口文件中读取预设的防抖指令；在所述访问页面中注入所述防抖指令；提取所述防抖指令中携带的防抖参数和防抖函数；根据所述防抖参数执行防抖函数执行页面防抖。整个方案中，在响应页面访问事件时，直接从项目入口文件中读取预设的防抖指令来获取防抖参数和防抖函数，其无需在访问面页面内临时注册，即可实现防抖参数和防抖函数的传入，可以简便实现页面防抖。

Description

页面防抖方法、装置、计算机设备以及存储介质

技术领域

本申请涉及移动互联技术领域，特别是涉及一种页面防抖方法、装置、计算机设备、存储介质和计算机程序产品。

背景技术

随着互联网技术的飞速发展，超文本标记语言页面成为广大用户访问互连网的首选。在网页开发过程中，通常把超文本标记语言标记和事件绑定在一起，为用户提供了可供交互的操作反馈。

在实际应用中，但无论是在手机端还是web端，都会存在用户使用过程中重复点击按钮导致页面重复出现，迅速滚动窗口导致页面卡顿，输入框搜索时频繁请求后端导致服务器压力等类似现象，一是用户体验感不佳，二是对于后端来说，频繁请求也会造成不必要的浪费以及服务器压力。那么，防抖就很有现实意义。防抖，顾名思义就是防止抖动，从技术角度来说，就是阻止事件的多次调用，避免在短时间内多次向后端请求导致的浪费。

目前虽然已有实现页面防抖的方案，但是在应用这些防抖方案时，需要在该页面中注册后才能正常使用，无法实现处理简便的页面防抖。

发明内容

基于此，有必要针对上述技术问题，提供一种简便的页面防抖方法、装置、计算机设备、存储介质和计算机程序产品。

第一方面，本申请提供了一种页面防抖方法。所述方法包括：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在所述访问页面中注入所述防抖指令；

提取所述防抖指令中携带的防抖参数和防抖函数；

根据所述防抖参数执行防抖函数执行页面防抖。

在其中一个实施例中，所述响应页面访问事件，识别访问页面之前，还包括：

自定义初始v-debounce指令；

获取预设防抖参数，将所述预设防抖参数以及防抖函数写入至所述初始v-debounce指令中，得到防抖指令；

将所述防抖指令注册至项目入口文件中。

在其中一个实施例中，所述自定义初始v-debounce指令包括：

通过vue.directive方法自定义初始v-debounce指令。

在其中一个实施例中，所述将所述防抖指令注册至项目入口文件中包括：

将所述防抖指令全局引入至vue项目中mian.js文件。

在其中一个实施例中，上述页面防抖方法还包括：

提取绑定所述防抖指令的DOM元素数据信息；

当需执行页面访问时，根据提取的所述DOM元素数据信息执行页面访问。

在其中一个实施例中，所述根据所述防抖参数执行防抖函数执行页面防抖包括：

当监听页面被连续访问时，根据所述防抖参数判断是否立即执行、并获取延时时间；

若是立即执行，则执行首次页面访问事件，并延时所述延时时间后再执行页面访问事件；

若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

第二方面，本申请还提供了一种页面防抖装置。所述装置包括：

响应模块，用于响应页面访问事件，识别访问页面；

指令读取模块，用于从项目入口文件中读取预设的防抖指令；

指令注入模块，用于在所述访问页面中注入所述防抖指令；

防抖参数提取模块，用于提取所述防抖指令中携带的防抖参数和防抖函数；

防抖模块，用于根据所述防抖参数执行防抖函数执行页面防抖。

在其中一个实施例中，上述页面防抖装置还包括指令生成模块，用于自定义初始v-debounce指令；获取预设防抖参数，将所述预设防抖参数以及防抖函数写入至所述初始v-debounce指令中，得到防抖指令；将所述防抖指令注册至项目入口文件中。

在其中一个实施例中，所述指令生成模块还用于通过vue.directive方法自定义初始v-debounce指令。

在其中一个实施例中，所述指令生成模块还用于将所述防抖指令全局引入至vue项目中mian.js文件。

在其中一个实施例中，上述页面防抖装置还包括执行模块，用于提取绑定所述防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的所述DOM元素数据信息执行页面访问。

在其中一个实施例中，所述防抖模块还用于当监听页面被连续访问时，根据所述防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时所述延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

第三方面，本申请还提供了一种计算机设备。所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在所述访问页面中注入所述防抖指令；

提取所述防抖指令中携带的防抖参数和防抖函数；

根据所述防抖参数执行防抖函数执行页面防抖。

第四方面，本申请还提供了一种计算机可读存储介质。所述计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在所述访问页面中注入所述防抖指令；

提取所述防抖指令中携带的防抖参数和防抖函数；

根据所述防抖参数执行防抖函数执行页面防抖。

第五方面，本申请还提供了一种计算机程序产品。所述计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在所述访问页面中注入所述防抖指令；

提取所述防抖指令中携带的防抖参数和防抖函数；

根据所述防抖参数执行防抖函数执行页面防抖。

上述页面防抖方法、装置、计算机设备、存储介质和计算机程序产品，响应页面访问事件，识别访问页面；从项目入口文件中读取预设的防抖指令；在所述访问页面中注入所述防抖指令；提取所述防抖指令中携带的防抖参数和防抖函数；根据所述防抖参数执行防抖函数执行页面防抖。整个方案中，在响应页面访问事件时，直接从项目入口文件中读取预设的防抖指令来获取防抖参数和防抖函数，其无需在访问面页面内临时注册，由于无需临时注册，即可实现防抖参数和防抖函数的传入，因此，可以大大减少页面防抖过程中处理步骤，简化整个页面防抖的流程，可以简便实现页面防抖。

附图说明

图1为一个实施例中页面防抖方法的应用环境图；

图2为一个实施例中页面防抖方法的流程示意图；

图3为另一个实施例中页面防抖方法的流程示意图；

图4为又一个实施例中页面防抖方法的流程示意图；

图5为一个具体应用实例中页面防抖方法的流程示意图；

图6为一个实施例中页面防抖装置的结构框图；

图7为一个实施例中计算机设备的内部结构图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

针对传统技术中重复点击按钮导致页面重复出现，迅速滚动窗口导致页面卡顿，输入框搜索时频繁请求后端导致服务器压力等类似现象。针对该情况，针对页面访问引入防抖机制，从技术角度来说，就是阻止事件的多次响应，设置在规定的延迟时间后响应一次，或者先执行第一次，若再频繁先点击即按照设定的延迟事件再执行，避免在短时间内多次向后端请求导致的浪费。在该防抖逻辑的基础上，目前已有的防抖方案是将防抖组件作为子组件引入，然后作为自定义标签嵌套在外层，当触发响应事件的同时，也触发到子组件的函数，在子组件中通过props获取父组件的信息，然后对事件进行处理，以达到防抖效果。

进一步深入研究发现，组件化的使用必须在每个页面中通过component注册后形成自定义标签才能引用，即使用该防抖方法前需要在该页面中注册后才能正常使用，这一步骤就使得整个防抖过程复杂、繁琐。

针对上述传统技术中存在的缺陷，本申请实施例提供的页面防抖方法，可以应用于如图1所示的应用环境中。其中，用户在终端102进行页面浏览操作，当用户点击页面浏览/跳转按钮时，触发页面访问事件，终端102响应页面访问事件，识别访问页面；从项目入口文件中读取预设的防抖指令；在访问页面中注入防抖指令；提取防抖指令中携带的防抖参数和防抖函数；根据防抖参数执行防抖函数执行页面防抖，通过页面防抖控制可以有效避免页面卡顿和频繁请求，带来良好的用户体验。其中，终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备，物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。

在一个实施例中，如图2所示，提供了一种页面防抖方法，以该方法应用于图1中的终端102为例进行说明，包括以下步骤：

S100：响应页面访问事件，识别访问页面。

页面访问事件是指对页面的访问事件，其具体可以是由用户操作触发，例如用户点击页面跳转的按钮(可以为虚拟按钮或实体按钮)，此时就发出页面访问的请求。以实际应用场景为例，用户在终端浏览物品A的出售页面，用户想进一步了解A相关物品详情，用户在终端上操作，点击物品详情按钮，此时就触发了访问物品详情页面的事件，此时终端响应该物品详情页面访问事件，识别所需访问的页面为物品详情页面。进一步的，比较常见的页面访问事件还包括访问下一页、上一页、首页、末页以及第N页等事件。

S200：从项目入口文件中读取预设的防抖指令。

项目入口文件是指设置于整个项目入口的文件，其属于已经注册到项目中的文件，在每次响应访问事件时，都可以直接从从入口文件内读取数据，即可以直接读取防抖指令。防抖指令是预先设定的指令，在该指令内具体写入有防抖逻辑和相关的防抖参数，后续将基于该防抖指令进行页面防抖。具体来说，项目为Vue项目；Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。在Vue项目中入口文件是指处于整个vue项目中入口的文件，其是已经注册到vue项目中的文件，在每次响应访问事件时都可以直接从该入口文件中读取到所需数据。

S300：在访问页面中注入防抖指令。

由于预设的防抖指令是预先存储在项目入口文件，其已经完成在项目中的注册，后续针对每个页面(访问页面)都可以直接使用该预设的防抖指令，而无需重新在页面(访问页面)中进行临时注册。

S400：提取防抖指令中携带的防抖参数和防抖函数。

防抖参数是指与页面防抖相关的参数，其具体是在生成防抖指令时写入的，其具体可以包括多种类型的参数信息，例如可以包括响应类型和延时时间，其中，响应类型又可以包括点击、输入、改变等，延时时间是指连续触发访问事件的情况下，下一次执行该事件的时间间隔。防抖函数是指用于实现防抖逻辑的函数。

S500：根据防抖参数执行防抖函数执行页面防抖。

基于防抖参数执行防抖函数，即执行防抖逻辑，实现页面防抖的功能，给用户带来良好的体验。

上述页面防抖方法，响应页面访问事件，识别访问页面；从项目入口文件中读取预设的防抖指令；在访问页面中注入防抖指令；提取防抖指令中携带的防抖参数和防抖函数；根据防抖参数执行防抖函数执行页面防抖。整个方案中，在响应页面访问事件时，直接从项目入口文件中读取预设的防抖指令来获取防抖参数和防抖函数，其无需在访问面页面内临时注册，即可实现防抖参数和防抖函数的传入，可以简便实现页面防抖。

如图3所示，在其中一个实施例中，S100还包括：

S120：自定义初始v-debounce指令；

S140：获取预设防抖参数，将预设防抖参数以及防抖函数写入至初始v-debounce指令中，得到防抖指令；

S160：将防抖指令注册至项目入口文件中。

采取自定义的方式定义初始v-debounce指令，该初始v-debounce指令可以理解为未写入相关防抖参数和防抖函数的v-debounce指令，其具体可以通过vue.directive方法自定义初始v-debounce指令，在vue.directive方法设置有多个钩子函数可以使用。在得到初始v-debounce指令之后，再获取预设防抖参数，将该预设防抖参数以及防抖函数写入至初始v-debounce指令中，生成防抖指令。防抖参数是预先设定的，其具体基于应用场景的需要自定义设定，其具体包括响应类型和延时时间，其中，响应类型包括点击、输入、改变等，延时时间是指连续触发页面访问事件的情况下，下一次执行该事件的时间间隔，延时时间具体可以根据实际情况需要设定，其设定一般需要考虑用户体感上使用比较流畅，其具体可以为500ms。防抖函数是指用于实现防抖逻辑的函数，其具体防抖逻辑可以是判断是否立即执行，若是立即执行，则针对首次页面访问事件响应执行，按照设定好的延时时间延时后，再执行下一次页面访问事件。在得到防抖指令之后，将防抖指令注册至项目入口文件中。具体来说，这是一次数据/指令注册的动作，防抖指令在完成注册后，其在后续读取/调用时，无需再次注册，并且其注册在项目入口文件中，这样每个页面都可以直接使用该防抖指令。进一步的，防抖指令具体可以采用全局写入的方式引入到项目入口文件中，其还可以采取局部写入的方式引入到项目入口文件中。

在其中一个实施例中，将防抖指令注册至项目入口文件中包括：

将防抖指令全局引入至vue项目中mian.js文件。

Main.js文件是vue cil项目中的一个入口文件，Vue cli是指vue脚手架，是专门为单页面应用快速搭建繁杂的脚手架。通过将防抖指令全局引入至vue项目中mian.js文件之后，每个页面都可以直接使用该述防抖指令来实现页面防抖，而无需重新临时注册，极大的简化了防抖实现的步骤。

在其中一个实施例中，上述页面防抖方法还包括：提取绑定防抖指令的DOM(Document Object Model，文档对象模型)元素数据信息；当需执行页面访问时，根据提取的DOM元素数据信息执行页面访问。

DOM元素数据信息具体为访问页面对应的参数，在需要执行页面访问时，直接根据提取的DOM元素数据信息执行页面访问。在这里，通过修改底层的DOM元素数据信息可以调整、适用于不同的访问页面，具有强大的扩展性和复用性，可以满足在不同应用环境下的页面访问需求。

如图4所示，在其中一个实施例中，S500包括：

S520：当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；

S542：若是立即执行，则执行首次页面访问事件，并延时延时时间后再执行页面访问事件；

S544：若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

当监听页面被连续访问时，即表明此时发生重复访问事件，需要进行防抖逻辑，首先根据防抖参数判断是否立即执行一次页面访问事件，并且获取延时时间，若防抖参数中设置是否立即执行为ture，则执行首次页面访问事件，并延时设定好的延时时间后再执行下一次页面访问事件，若防抖参数中设置是否立即执行为false，则只有在用户停止频繁点击后，即当面被停止连续访问后，才开会执行页面访问事件，即执行停止频繁点击对应的最后一次页面访问事件。

在本实施例中，通过上述的防抖逻辑实现页面防抖，以达到频繁触发访问事件时只响应一次，或先执行第一次后再在规定间隔时间后再触发，减少对后端的请求以及服务器的压力，也可以给用户更好的体验感。

为了详细说明本申请页面防抖方法的技术方案及其效果，下面将采用具体实例详细展开说明。具体图5所示，在其中一个具体应用实例中，本申请页面防抖方法包括以下步骤：

1、通过vue.directive方法定义一个初始v-debounce指令；

2、在初始v-debounce指令内传入防抖参数以及防抖函数，得到v-debounce指令；

3、将v-debounce指令全局引入至vue项目中mian.js文件；

4、在使用时，响应页面访问事件，识别访问页面；

5、从vue项目的mian.js文件中读取v-debounce指令；

6、在访问页面所在的页面中通过html标签注入v-debounce指令；

7、提取v-debounce指令中携带的防抖参数和防抖函数；

8、当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；

9、若立即执行，则执行首次页面访问事件，并延时设定好的延时时间后再执行下一次页面访问事件；

10、若不立即执行，则只有在用户停止频繁点击后，即当面被停止连续访问后，才开会执行页面访问事件。

应该理解的是，虽然如上的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。

基于同样的发明构思，本申请实施例还提供了一种用于实现上述所涉及的页面防抖方法的页面防抖装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个页面防抖装置实施例中的具体限定可以参见上文中对于页面防抖方法的限定，在此不再赘述。

在一个实施例中，如图6所示，提供了一种页面防抖装置，包括：

响应模块100，用于响应页面访问事件，识别访问页面；

指令读取模块200，用于从项目入口文件中读取预设的防抖指令；

指令注入模块300，用于在访问页面中注入防抖指令；

防抖参数提取模块400，用于提取防抖指令中携带的防抖参数和防抖函数；

防抖模块500，用于根据防抖参数执行防抖函数执行页面防抖。

上述页面防抖装置，响应页面访问事件，识别访问页面；从项目入口文件中读取预设的防抖指令；在访问页面中注入防抖指令；提取防抖指令中携带的防抖参数和防抖函数；根据防抖参数执行防抖函数执行页面防抖。整个方案中，在响应页面访问事件时，直接从项目入口文件中读取预设的防抖指令来获取防抖参数和防抖函数，其无需在访问面页面内临时注册，即可实现防抖参数和防抖函数的传入，可以简便实现页面防抖。

在其中一个实施例中，上述页面防抖装置还包括指令生成模块，用于自定义初始v-debounce指令；获取预设防抖参数，将预设防抖参数以及防抖函数写入至初始v-debounce指令中，得到防抖指令；将防抖指令注册至项目入口文件中。

在其中一个实施例中，指令生成模块还用于通过vue.directive方法自定义初始v-debounce指令。

在其中一个实施例中，指令生成模块还用于将防抖指令全局引入至vue项目中mian.js文件。

在其中一个实施例中，上述页面防抖装置还包括执行模块，用于提取绑定防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的DOM元素数据信息执行页面访问。

在其中一个实施例中，防抖模块还用于当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

上述页面防抖装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图7所示。该计算机设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现一种页面防抖方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图7中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

在一个实施例中，提供了一种计算机设备，包括存储器和处理器，存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在访问页面中注入防抖指令；

提取防抖指令中携带的防抖参数和防抖函数；

根据防抖参数执行防抖函数执行页面防抖。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

自定义初始v-debounce指令；获取预设防抖参数，将预设防抖参数以及防抖函数写入至初始v-debounce指令中，得到防抖指令；将防抖指令注册至项目入口文件中。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

通过vue.directive方法自定义初始v-debounce指令。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将防抖指令全局引入至vue项目中mian.js文件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

提取绑定防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的DOM元素数据信息执行页面访问。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在访问页面中注入防抖指令；

提取防抖指令中携带的防抖参数和防抖函数；

根据防抖参数执行防抖函数执行页面防抖。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

自定义初始v-debounce指令；获取预设防抖参数，将预设防抖参数以及防抖函数写入至初始v-debounce指令中，得到防抖指令；将防抖指令注册至项目入口文件中。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

通过vue.directive方法自定义初始v-debounce指令。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将防抖指令全局引入至vue项目中mian.js文件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

提取绑定防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的DOM元素数据信息执行页面访问。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

在一个实施例中，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现以下步骤：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在访问页面中注入防抖指令；

提取防抖指令中携带的防抖参数和防抖函数；

根据防抖参数执行防抖函数执行页面防抖。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

自定义初始v-debounce指令；获取预设防抖参数，将预设防抖参数以及防抖函数写入至初始v-debounce指令中，得到防抖指令；将防抖指令注册至项目入口文件中。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

通过vue.directive方法自定义初始v-debounce指令。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

将防抖指令全局引入至vue项目中mian.js文件。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

提取绑定防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的DOM元素数据信息执行页面访问。

在一个实施例中，处理器执行计算机程序时还实现以下步骤：

当监听页面被连续访问时，根据防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

需要说明的是，本申请所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(ReRAM)、磁变存储器(Magnetoresistive Random Access Memory，MRAM)、铁电存储器(Ferroelectric Random Access Memory，FRAM)、相变存储器(Phase Change Memory，PCM)、石墨烯存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器等。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)等。本申请所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本申请所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (15)

1.一种页面防抖方法，其特征在于，所述方法包括：

响应页面访问事件，识别访问页面；

从项目入口文件中读取预设的防抖指令；

在所述访问页面中注入所述防抖指令；

提取所述防抖指令中携带的防抖参数和防抖函数；

根据所述防抖参数执行防抖函数执行页面防抖。

2.根据权利要求1所述的方法，其特征在于，所述响应页面访问事件，识别访问页面之前，还包括：

自定义初始v-debounce指令；

获取预设防抖参数，将所述预设防抖参数以及防抖函数写入至所述初始v-debounce指令中，得到防抖指令；

将所述防抖指令注册至项目入口文件中。

3.根据权利要求2所述的方法，其特征在于，所述自定义初始v-debounce指令包括：

通过vue.directive方法自定义初始v-debounce指令。

4.根据权利要求2或3所述的方法，其特征在于，所述将所述防抖指令注册至项目入口文件中包括：

将所述防抖指令全局引入至vue项目中mian.js文件。

5.根据权利要求1所述的方法，其特征在于，还包括：

提取绑定所述防抖指令的DOM元素数据信息；

当需执行页面访问时，根据提取的所述DOM元素数据信息执行页面访问。

6.根据权利要求1所述的方法，其特征在于，所述根据所述防抖参数执行防抖函数执行页面防抖包括：

当监听页面被连续访问时，根据所述防抖参数判断是否立即执行、并获取延时时间；

若是立即执行，则执行首次页面访问事件，并延时所述延时时间后再执行页面访问事件；

若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

7.一种页面防抖装置，其特征在于，所述装置包括：

响应模块，用于响应页面访问事件，识别访问页面；

指令读取模块，用于从项目入口文件中读取预设的防抖指令；

指令注入模块，用于在所述访问页面中注入所述防抖指令；

防抖参数提取模块，用于提取所述防抖指令中携带的防抖参数和防抖函数；

防抖模块，用于根据所述防抖参数执行防抖函数执行页面防抖。

8.根据权利要求7所述的装置，其特征在于，还包括指令生成模块，用于自定义初始v-debounce指令；获取预设防抖参数，将所述预设防抖参数以及防抖函数写入至所述初始v-debounce指令中，得到防抖指令；将所述防抖指令注册至项目入口文件中。

9.根据权利要求8所述的装置，其特征在于，所述指令生成模块还用于通过vue.directive方法自定义初始v-debounce指令。

10.根据权利要求8或9所述的装置，其特征在于，所述指令生成模块还用于将所述防抖指令全局引入至vue项目中mian.js文件。

11.根据权利要求7所述的装置，其特征在于，还包括执行模块，用于提取绑定所述防抖指令的DOM元素数据信息；当需执行页面访问时，根据提取的所述DOM元素数据信息执行页面访问。

12.根据权利要求7所述的装置，其特征在于，所述防抖模块还用于当监听页面被连续访问时，根据所述防抖参数判断是否立即执行、并获取延时时间；若是立即执行，则执行首次页面访问事件，并延时所述延时时间后再执行页面访问事件；若不立即执行，则当页面被停止连续访问时，执行页面访问事件。

13.一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

14.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

15.一种计算机程序产品，包括计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images