CN111274574A - 网页事件防抖方法、装置、服务器及计算机可读存储介质 - Google Patents

Abstract

本发明实施例提供的一种网页事件防抖方法、装置、服务器及计算机可读存储介质，涉及互联网技术领域，该方法包括：接收待防抖事件的多次操作指令；任意两次相邻操作指令的接收时间在预设时间阈值内；获取待防抖事件的事件列表；事件列表中包含拦截事件；拦截事件为事件列表的第一条事件；拦截事件用于拦截除最后一次操作指令外的剩余操作指令；在预设时间阈值内控制执行所述拦截事件。本发明在实现防抖的过程中，不需要额外编写网页代码，解决了函数防抖带来的可读性不好，入侵性很强的问题，能够简单灵活的实现网页事件的防抖。

Description

网页事件防抖方法、装置、服务器及计算机可读存储介质

技术领域

本发明涉及互联网技术领域，具体而言，涉及一种网页事件防抖方法、装置、服务器及计算机可读存储介质。

背景技术

随着互联网技术的飞速发展，超文本标记语言HTML(HyperTextMarkupLanguage，简称HTML)页面成为广大用户访问互连网的首先，在网页开发过程中，通常把HTML标记和事件绑定在一起，为用户提供了可供交互的操作反馈。用户在使用网页时，在频繁触发事件的场景中，有些情况可能执行的逻辑比较复杂或者耗时，此时浏览器的处理跟不上触发，就会发生卡顿、假死或者事件堆积，所以防抖就可以一定程度上解决或者缓解这种故障。

防抖(debounce)指得是在指定时间内相同的事件被频繁触发的情况下，只有触发的间隔超过指定间隔的时候，事件才会执行，目前实现事件防抖的方式是通过编写防抖函数，但是通过函数防抖需要对开发者原本编写的网页代码进行包裹，可读性不好，入侵性很强。

因此，如何提供一种简单、灵活的方式来实现网页事件的防抖效果，是需要解决的问题。

发明内容

有鉴于此，本发明提供一种网页事件防抖方法、装置、服务器及计算机可读存储介质，用于解决函数防抖带来的可读性不好，入侵性很强的问题。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供一种网页事件防抖方法，所述方法包括：

接收待防抖事件的多次操作指令；任意两次所述相邻操作指令的接收时间在预设时间阈值内；获取所述待防抖事件的事件列表；所述事件列表中包含拦截事件；所述拦截事件为所述事件列表的第一条事件；所述拦截事件用于拦截除最后一次操作指令外的剩余操作指令；在所述预设时间阈值内控制执行所述拦截事件。

可选地，在所述获取待防抖事件的事件列表的步骤之前，所述方法还包括：根据预设防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息；所述HTML标记信息中包含所述待防抖事件的事件列表。

可选地，在所述根据预设防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息的步骤之后，所述方法还包括：

所述方法还包括：在所述待防抖事件的事件列表中写入所述拦截事件。

可选地，所述在所述待防抖事件的事件列表中写入所述拦截事件的步骤，包括：在所述拦截事件的事件内容中写入所述预设时间阈值和拦截信息；所述拦截信息用于指示所述拦截事件拦截除最后一次操作指令外的剩余操作指令。

第二方面，本发明实施例提供一种网页事件防抖装置，包括：接收模块、获取模块和控制模块；所述接收模块，用于接收待防抖事件的多次操作指令；任意两次相邻所述操作指令的接收时间在预设时间阈值内；所述获取模块，用于获取所述待防抖事件的事件列表；所述事件列表中包含拦截事件；所述拦截事件为所述事件列表的第一条事件；所述拦截事件用于拦截除最后一次操作指令外的剩余操作指令；所述控制模块，用于在所述预设时间阈值内控制执行所述拦截事件。

可选地，所述获取模块还用于根据预设的防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息；所述HTML标记信息中包含所述待防抖事件的事件列表。

可选地，所述网页事件防抖装置还包括写入模块；所述写入模块，用于在所述待防抖事件的事件列表中写入所述拦截事件。

可选地，所述写入模块具体用于：在所述拦截事件的事件内容中写入所述预设时间阈值和拦截信息；所述拦截信息用于指示所述拦截事件拦截除最后一次操作指令外的剩余操作指令。

第三方面，本发明实施例提供一种服务器，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器可执行所述机器可执行如第一方面所述的网页事件防抖方法。

第四方面，本发明实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现第一方面所述的网页事件防抖方法。

与现有技术相比，本发明实施例提供的网页事件防抖方法、装置、服务器及计算机可读存储介质，该方法包括：接收待防抖事件的多次操作指令；任意两次相邻操作指令的接收时间在预设时间阈值内；获取待防抖事件的事件列表；事件列表中包含拦截事件；拦截事件为事件列表的第一条事件；拦截事件用于拦截除最后一次操作指令外的剩余操作指令；在预设时间阈值内控制执行所述拦截事件。本方法在实现防抖的过程中，只需要获取待防抖事件的事件列表中的拦截事件，然后通过执行拦截事件来拦截预设时间阈值内的除最后一次操作指令外的剩余操作指令从而实现事件防抖，整个过程不需要额外编写网页代码，解决了函数防抖带来的可读性不好，入侵性很强的问题，能够简单灵活的实现网页事件的防抖。

本发明实施例的其他特征和优点将在随后的说明书阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明实施例了解。本发明的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的一种网页事件防抖方法的示意性流程图；

图2为本发明实施例提供的另一种网页事件防抖方法的示意性流程图；

图3为本发明实施例提供的另一种网页事件防抖方法的示意性流程图；

图4为本发明实施例提供的一种网页事件防抖装置的功能模块图；

图5为本发明实施例提供的另一种网页事件防抖装置的功能模块图；

图6为本发明实施例提供的一种服务器的结构框图。

图标：40-网页事件防抖装置；401-接收模块；402-获取模块；403-控制模块；404-写入模块；50-服务器；501-通信接口；502-处理器；503-存储器。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前，用户在使用网页时，常常会出现频繁触发事件的场景，有些情况可能执行的逻辑比较复杂或者耗时，此时浏览器的处理跟不上触发，就会发生卡顿、假死或者事件堆积，所以防抖(debounce)就可以一定程度上解决或者缓解这种故障。防抖就是在一段时间内重复触发事件，延迟事件处理函数的执行，它并没有减少事件的触发，只是限制了处理函数的执行。常见的需要防抖的场景：鼠标事件(包括拖拽、划过、滚屏等)、键盘事件(包括按下键盘keydown、弹起键盘keyup)、搜索框等触发后台请求、频繁改变窗口大小resize、鼠标移动mousemove事件等，类似以上频繁触发并且处理逻辑较为耗时。

为了实现网页事件防抖，现有的方式是通过在网页代码中写入防抖函数来实现防抖的效果，但使用该方法时，需要对开发者原本编写的网页代码进行包裹，可读性不好，入侵性强。

因此，为了解决上述技术问题，本发明实施例提供的一种网页事件防抖方法，其核心在于，通过在待防抖事件的事件列表中写入拦截事件，用于在防抖控制时间内拦截除最后一次操作指令外的剩余操作指令，实现将多次操作指令合并为一次的目的，从而达到事件防抖的效果，该过程不需要额外编写网页代码，能够简单灵活的实现网页事件防抖的效果。

在介绍本发明技术方案之前，先对本发明实施例中涉及的专业术语进行简单的解释。

网页：指得是通过JavaScript编写的由一系列HTML标记构成的网站界面。

HTML标记：用于创建网页的超文本标记语言，语言形式为尖括号包围的标记，这里把以尖括号包围的代码，成为一个标记，例如<mark-up>，标记可以有标记属性，形如<textcolor＝“red”>，“text”为标记名，“color”为标记属性，“red”为标记属性“color”的值。

JavaScript：用于实现网页交互逻辑(例如鼠标点击后的效果等)的编程语言。

事件：用户在使用网页时产生的互动行为，例如单击、双击、划动、拖拽等。

事件绑定：把HTML标记与事件关联起来，当用户在网页上触发绑定的事件，会运行指定的JavaScript代码。例如，HTML标记可以形如“<button>按钮</button>”,该标记表示一个“按钮”标记，通过在HTML标记信息中写入事件类型的信息，即可完成事件绑定，例如，为按钮上绑定一个“点击”事件，在一些场景中，一条HTML标记可以绑定多个事件，例如，在给按钮上绑定了多个点击事件。

为了详细描述本发明实施例提供的网页事件防抖方法，请参见图1，图1为本发明实施例提供的一种网页事件防抖方法的示意性流程图，该方法包括：

步骤201、接收待防抖事件的多次操作指令；任意两次相邻操作指令的接收时间在预设时间阈值内。

在本发明实施例中，待防抖事件可以是用户在使用网页时产生的互动行为，例如单击、双击、划动、拖拽、输入等。在网页代码中，待防抖事件可以和超文本标记语言HTML标记绑定在一起，以提供绑定事件的接口，当用户在网页上触发绑定的事件，会通过该事件接口执行该事件的处理事件函数。

为了方便理解，以用户在搜索框输入“debounce”单词调用搜索的场景为例详细介绍，在对搜索事件没有进行防抖处理的场景中，当用户在页面搜索框中输入“d”时触发一次搜索，输入“de”时再触发一次搜索，直至输入完“debounce”，每输入一个字母搜索事件被触发一次，在实际的情况下，用户输入指令的时间间隔较短(例如2秒)，除输入完“debounce”触发搜索事件之外的其余搜索都是不必要的，所以可以通过防抖处理阻止除最后一次搜索外的其他搜索。

步骤204、获取待防抖事件的事件列表；事件列表中包含拦截事件；拦截事件为事件列表的第一条事件；拦截事件用于拦截除最后一次操作指令外的剩余操作指令。

在本申请实施例中，当待防抖事件的多次操作指令在预设时间阈值内时，通过拦截事件在预设时间范围内的除最后一次操作指令的剩余操作指令。

为了方便理解，以一个按钮上绑定了多个点击事件的场景为例，详细介绍拦截事件的工作原理，例如，网页代码中的一个“按钮”标记为“<button>按钮</button>”，为按钮上绑定了3个点击事件，分别弹出“点击1”、“点击2”“点击3”，其中，“点击1”、“点击2”“点击3”可以看作是多次操作指令对应的事件名称，对应的事件执行内容可以分别表示为“执行操作1”、“执行操作2”、“执行操作3”，事件名称和事件执行内容可以理解为事件列表，其中，拦截事件可以为该事件列表的第一条事件内容。为了方便理解，假设预设时间阈值为2秒，当用户在2秒内连续点击了按钮5次，在没有写入拦截事件的情况中，事件的执行顺序为：“执行操作1->执行操作2->执行操作3”，由于没有防抖，该事件执行顺序会被执行5次，浪费浏览器资源，在事件列表中加入拦截事件后，事件的执行顺序可以理解为“拦截事件->执行操作1->执行操作2->执行操作3”，拦截事件就会拦截时间阈值内前4次点击，保留第5次点击，这样一来，事件的执行顺序“执行操作1->执行操作2->执行操作3”仅仅被执行一次，从而实现事件防抖。

步骤205、在预设时间阈值内控制执行拦截事件。

在本申请实施例中，拦截事件的处理函数可以是JavaScript编写的event.preventDefault函数，通过控制执行拦截事件的处理函数从而实现对多次操作指令中除最后一次操作指令之外的剩余操作指令，实现事件防抖的效果。

本发明实施例提供的一种网页事件防抖方法，该方法包括：接收待防抖事件的多次操作指令；当任意两次相邻操作指令的接收时间在预设时间阈值内时，获取待防抖事件的事件列表；事件列表中包含拦截事件；拦截事件为事件列表的第一条事件；拦截事件用于拦截除最后一次操作指令外的剩余操作指令；在预设时间阈值内控制执行拦截事件。本方法在实现防抖的过程中，只需要获取待防抖事件的事件列表中的拦截事件，然后通过执行拦截事件来拦截预设时间阈值内的除最后一次操作指令外的剩余操作指令从而实现事件防抖，整个过程不需要额外编写网页代码，解决了函数防抖带来的可读性不好，入侵性很强的问题，能够简单灵活的实现网页事件的防抖。

可选地，为了能够获得待防抖事件的事件列表，在图1的基础上，给出一种可能的实现方式，参见图2，图2为本发明实施例提供的另一种网页事件防抖方法的示意性流程图，其中，在获取待防抖事件的事件列表之前，该方法还包括：

步骤202、根据预设防抖属性获取包含待防抖事件的超文本标记语言HTML标记信息；HTML标记信息中包含所待防抖事件的事件列表。

在本申请实施例中在开发网页的过程中，只需要在需要进行事件防抖的HTML标记中预设一个防抖属性，就可以获得待防抖事件的事件列表，从而通过执行事件列表中的拦截事件实现事件防抖的效果，该过程不需要额外编写代码，可以简单灵活的实现事件防抖效果。

例如：形如<buttondebounce＝“click,2000”>这是一个防抖按钮</button>的HTML标记,其中，“debounce”就是该标记的防抖属性，属性值中的“click”是指点击事件，“2000”是预设的时间阈值，单位为毫秒。通过在网页代码中检索具有预设防抖属性“debounce”的HTML标记信息，就可以获得按钮绑定的点击事件的事件列表。

可选地，为了能够获得拦截事件，通过拦截事件在预设的时间阈值内将多次操作指令合并为一次，在图2的基础上，给出一种可能的实现方式，参见图3，图3为本发明实施例提供的另一种网页事件防抖方法的示意性流程图，其中，在根据预设防抖属性获取包含待防抖事件的超文本标记语言HTML标记信息的步骤之后，该方法还包括：

步骤203、在待防抖事件的事件列表中写入拦截事件。

在本发明实施例中，拦截事件可以写入事件列表的第一条事件内容之前，用来拦截预设事件内的操作指令，在一种可能的实现方式下，在待防抖事件的事件列表中写入拦截事件的步骤，可以包括：

在拦截事件的事件内容中写入预设时间阈值和拦截信息，其中拦截信息用于指示拦截事件拦截除最后一次操作指令外的剩余操作指令。

为了执行上述实施例及各个可能的方式中的相应步骤，以实现相应的技术效果，下面给出一种网页事件防抖装置的实现方式，参见图4，图4为本发明实施例提供的一种网页事件防抖装置的功能模块图。

需要说明的是，本发明实施例所提供的一种网页事件防抖装置可以是其基本原理及产生的技术效果和上述实施例相同，为简要描述，本实施例部分未提及之处，可参考上述的实施例中相应内容。该网页事件防抖装置40包括：接收模块401、获取模块402、控制模块403。

接收模块401，用于接收待防抖事件的多次操作指令；任意两次相邻操作指令的接收时间在预设时间阈值内。

获取模块402，用于获取待防抖事件的事件列表；事件列表中包含拦截事件；拦截事件为事件列表的第一条事件；拦截事件用于拦截除最后一次操作指令外的剩余操作指令。

控制模块403，用于在预设时间阈值内控制执行拦截事件。

可以理解的是，接收模块401、获取模块402、控制模块403可以协同的执行步骤201、步骤204和步骤205以实现相应是技术效果。

可选地，获取模块402，还用于根据预设的防抖属性获取包含待防抖事件的超文本标记语言HTML标记信息；HTML标记信息中包含待防抖事件的事件列表。

可以理解的是，获取模块402可以用于执行步骤202以实现相应的技术效果。

为了实现获得拦截事件的功能，在图4的基础上，给出一种可能的实现方式，参见图5，图5为本发明实施例提供的另一种网页事件防抖装置的功能模块图，其中，网页事件防抖装置40还包括写入模块404。

写入模块404，用于在待防抖事件的事件列表中写入拦截事件。

可以理解的是，写入模块404可以用于执行步骤203以实现相应的技术效果。

可选地，写入模块404具体用于在拦截事件的事件内容中写入预设时间阈值和拦截信息；拦截信息用于指示拦截事件拦截除最后一次操作指令外的剩余操作指令。

本发明实施例还提供一种服务器，参见图6，图6为本发明实施例提供的服务器方框示意图，该服务器50包括通信接口501、处理器502和存储器503。该处理器502、存储器503和通信接口501相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。存储器503可用于存储软件程序及模块，如本发明实施例所提供的网页事件防抖方法对应的程序指令/模块，处理器502通过执行存储在存储器503内的软件程序及模块，从而执行各种功能应用以及数据处理。该通信接口501可用于与其他节点设备进行信令或数据的通信。在本发明中该服务器50可以具有多个通信接口501。

其中，存储器503可以是但不限于，随机存取存储器(RandomAccessMemory，RAM)，只读存储器(ReadOnlyMemory，ROM)，可编程只读存储器(ProgrammableRead-OnlyMemory，PROM)，可擦除只读存储器(ErasableProgrammableRead-OnlyMemory，EPROM)，电可擦除只读存储器(ElectricErasableProgrammableRead-OnlyMemory，EEPROM)等。

处理器502可以是一种集成电路芯片，具有信号处理能力。该处理器可以是通用处理器，包括中央处理器(CentralProcessingUnit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(DigitalSignalProcessing，DSP)、专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、现场可编程门阵列(Field－ProgrammableGateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。

可选地，上述网页事件防抖装置40可以以软件或固件的形式存储于图6所示的服务器50的存储器503中或固化于该服务器50的操作系统(OperatingSystem，OS)中，并可由处理器502执行。当网页事件防抖装置40以软件的形式存在，用户在自己开发的网页中需要进行事件防抖时，可以将本发明实施提供的网页事件防抖装置40引入到网页的标记信息中，通过该网页事件防抖装置40实现事件防抖的效果。同时，执行上述模块所需的数据、程序的代码等可以存储在存储器503中。

本发明还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如前述实施方式中任一项的网页事件防抖方法。该存储介质可以是，但不限于，U盘、移动硬盘、ROM、RAM、PROM、EPROM、EEPROM、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

在本发明的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其它的具体形式实现本发明。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本发明内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

Claims (10)

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

接收待防抖事件的多次操作指令；任意两次相邻所述操作指令的接收时间在预设时间阈值内；

获取所述待防抖事件的事件列表；所述事件列表中包含拦截事件；所述拦截事件为所述事件列表的第一条事件；所述拦截事件用于拦截除最后一次操作指令外的剩余操作指令；

在所述预设时间阈值内控制执行所述拦截事件。

2.根据权利要求1所述的网页事件防抖方法，其特征在于，在所述获取所述待防抖事件的事件列表的步骤之前，所述方法还包括：

根据预设防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息；所述HTML标记信息中包含所述待防抖事件的事件列表。

3.根据权利要求2所述的网页事件防抖方法，其特征在于，在所述根据预设防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息的步骤之后，所述方法还包括：

在所述待防抖事件的事件列表中写入所述拦截事件。

4.根据权利要求3所述的网页事件防抖方法，其特征在于，所述在所述待防抖事件的事件列表中写入所述拦截事件的步骤，包括：

在所述拦截事件的事件内容中写入所述预设时间阈值和拦截信息；所述拦截信息用于指示所述拦截事件拦截除最后一次操作指令外的剩余操作指令。

5.一种网页事件防抖装置，其特征在于，包括：接收模块、获取模块和控制模块；

所述接收模块，用于接收待防抖事件的多次操作指令；任意两次相邻所述操作指令的接收时间在预设时间阈值内；

所述获取模块，用于获取所述待防抖事件的事件列表；所述事件列表中包含拦截事件；所述拦截事件为所述事件列表的第一条事件；所述拦截事件用于拦截除最后一次操作指令外的剩余操作指令；

所述控制模块，用于在所述预设时间阈值内控制执行所述拦截事件。

6.根据权利要求5所述的网页事件防抖装置，其特征在于，

所述获取模块，还用于根据预设的防抖属性获取包含所述待防抖事件的超文本标记语言HTML标记信息；所述HTML标记信息中包含所述待防抖事件的事件列表。

7.根据权利要求6所述的网页事件防抖装置，其特征在于，还包括：写入模块；

所述写入模块，用于在所述待防抖事件的事件列表中写入所述拦截事件。

8.根据权利要求7所述的网页事件防抖装置，其特征在于，所述写入模块具体用于：

在所述拦截事件的事件内容中写入所述预设时间阈值和拦截信息；所述拦截信息用于指示所述拦截事件拦截除最后一次操作指令外的剩余操作指令。

9.一种服务器，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的机器可执行指令，所述处理器可执行所述机器可执行指令以实现权利要求1～4任一所述的网页事件防抖方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1～4中任一项所述的网页事件防抖方法。

Images