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

文档序号:21634509发布日期:2020-07-29 02:44阅读:来源:国知局

技术特征:

1.一种防抖与节流封装方法,其特征在于,所述方法包括以下步骤:

步骤1、通过使用javascript,监听特定事件的发生;

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

2.如权利要求1所述的防抖与节流封装方法,其特征在于,所述步骤1中的所述特定事件包括窗口调整大小、滚动、输入、按钮点击、地图缩放和设置范围中的一种或多种。

3.如权利要求1所述的防抖与节流封装方法,其特征在于,所述步骤2中的所述函数防抖包括立即执行选项,以实现首次立即执行事件处理函数。

4.如权利要求3所述的防抖与节流封装方法,其特征在于,所述步骤2中的所述函数防抖包括延迟函数,所述延迟函数通过设定定时器,使用缓存的上下文和参数,延迟执行事件处理函数。

5.如权利要求4所述的防抖与节流封装方法,其特征在于,所述步骤2中所述函数防抖具体包括以下步骤:

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

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

6.如权利要求1所述的防抖与节流封装方法,其特征在于,所述步骤2中所述函数节流具体包括以下步骤:

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

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

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

7.如权利要求1所述的防抖与节流封装方法,其特征在于,所述方法还包括将所述函数防抖和函数节流进行二次函数封装或函数式组件封装。

8.如权利要求7所述的防抖与节流封装方法,其特征在于,所述函数式组件封装为vue组件封装或react组件封装。

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

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


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

技术研发人员:张珍妮;李小波
受保护的技术使用者:上海熙菱信息技术有限公司
技术研发日:2020.04.07
技术公布日:2020.07.28
当前第2页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1