一种用于加载动画防止频繁闪烁的方法技术

本发明专利技术公开了一种用于加载动画防止频繁闪烁的方法，包括如下步骤：步骤1，引入计数器；步骤2，将隐藏加载动画方法放在宏队列；利用事件循环机制，将展示加载动画方法和接口请求方法放在主线程，将隐藏加载动画方法放在宏队列；步骤3，利用计数器减少展示和隐藏加载动画次数；当进入接口处理方法时，如果计数器为0时，执行一次展示加载动画方法；当执行宏队列任务时，如果计数器为0时，执行一次隐藏加载动画方法。本发明专利技术以减少隐藏加载动画方法执行次数来作为技术优化方向，能够大幅减少多余事件执行次数，性能和用户体验提升明显。性能和用户体验提升明显。性能和用户体验提升明显。

【技术实现步骤摘要】
一种用于加载动画防止频繁闪烁的方法


[0001]本专利技术属于软件管理的
，具体涉及一种用于加载动画防止频繁闪 烁的方法。

技术介绍

[0002]目前在处理多接口调用的场景中，互联网产品普遍存在加载动画频繁闪烁 的问题。
[0003]什么是闪烁，就是在进入界面时，对于每个展示内容，都存在着展示加载 动画及隐藏加载动画，进入首页一共请求多个接口，每个接口响应时间有快有 慢，这也是造成加载动画闪烁的原因。
[0004]再之，路由跳转指由一个地址跳转到另一个地址，导致页面重新渲染。当 连续请求的接口中间发生路由跳转，就不可避免地发生页面渲染和加载闪烁的 情况；在请求访问过程中，由于请求访问该URL的主机有并发和连接数限制， 浏览器会把当前请求放入队列中进行排队，因此造成请求阻塞，也是造成闪烁 的原因；目前的处理方式是处理接口方法自定义maskflag，maskflag指泛指蒙 层，在调用接口时可以设置maskflag为false隐藏加载动画，当连续请求的接口 中，其中某些接口设置maskflag为false，这也是造成加载动画闪烁的原因。
[0005]为此，如何消除动画频繁闪烁是在各种软件应用中需要面临的一个问题。

技术实现思路

[0006]为解决上述问题，本专利技术的首要目的在于提供一种用于加载动画防止频繁 闪烁的方法，该方法是新型的前端接口处理的通用解决方案，在处理多接口调 用的场景中，能够大幅减少加载动画的闪烁次数，解决了加载动画频繁闪烁的 问题。
[0007]本专利技术是一种用于加载动画防止频繁闪烁的方法，该方法以减少隐藏加载 动画方法执行次数来作为技术优化方向，能够大幅减少多余事件执行次数，性 能和用户体验提升明显。
[0008]加载动画频繁闪烁主要是多次执行隐藏加载动画方法造成的，因此以减少 隐藏加载动画方法执行次数来作为技术优化方向，
[0009]为实现上述目的，本专利技术的技术方案如下。
[0010]一种用于加载动画防止频繁闪烁的方法，该方法包括以下步骤：
[0011]步骤1，引入计数器；
[0012]初始化加载计数器为0，接口请求开始时+1，接口请求结束或者报错时
‑
1。 当计数器大于1展示加载动画，等于0隐藏加载动画。
[0013]步骤2，将隐藏加载动画方法放在宏队列；
[0014]利用事件循环机制，将展示加载动画方法和接口请求方法放在主线程，将 隐藏加载动画方法放在宏队列。消息必须等待主线程多个接口请求消息处理完， 再处理隐藏加载
动画方法。
[0015]步骤3，利用计数器减少展示和隐藏加载动画次数。当进入接口处理方法 时，如果计数器为0时，执行一次展示加载动画方法。当执行宏队列任务时， 如果计数器为0时，执行一次隐藏加载动画方法。
[0016]进一步，步骤2中，利用函数setTimeout接受两个参数：待加入队列的消 息和一个时间值，这个时间值默认为0，代表了消息被实际加入到队列的最小 延迟时间。
[0017]如果队列中有其它消息，setTimeout消息必须等待其它消息处理完，再处 理待加入队列的消息。
[0018]进一步，步骤3中，利用计数器减少showMask()和hideMask()次数，
[0019]当进入接口处理方法时，如果计数器为0时，执行一次展示加载动画showMask()；
[0020]当执行宏队列任务时，如果计数器为0时，执行一次隐藏加载动画 hideMask()。
[0021]本专利技术的有益效果是：
[0022]1、以减少隐藏加载动画方法执行次数来，能够大幅减少多余事件执行次数， 性能提升明显；
[0023]2、能够使全局提升前端风控能力；
[0024]3、代码改造量少，容易实现，影响范围广；
[0025]4、可应用于所有产品，产品包括各渠道H5、微信小程序、客户端及后台 管理系统。
附图说明
[0026]图1是本专利技术所实现的隐藏加载动画放在宏队列示意图。
[0027]图2是本专利技术所实现的利用计数器减少展示和隐藏加载动画次数示意图。
[0028]图3是本专利技术所实现的减少多余事件执行次数示意图。图4是本专利技术所实现的隐藏加载动画方法减少多余事件执行次数示意图。
具体实施方式
[0029]为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实 施例，对本专利技术进行进一步详细说明。应当理解，此处所描述的具体实施例仅 仅用以解释本专利技术，并不用于限定本专利技术。
[0030]图1所示，为本专利技术所实现的用于加载动画防止频繁闪烁的方法，该方法 包括以下步骤：
[0031]步骤1、引入计数器；
[0032]初始化加载计数器为0，接口请求开始时+1，接口请求结束或者报错时
‑
1。
[0033]当计数器大于1展示加载动画，等于0隐藏加载动画。
[0034]步骤2、将隐藏加载动画方法放在宏队列；如图2所示，
[0035]利用事件循环机制，将展示加载动画方法和接口请求方法放在主线程，将 隐藏加载动画方法放在宏队列。消息必须等待主线程多个接口请求消息处理完， 再处理隐藏加载动画方法。
[0036]利用函数setTimeout接受两个参数：待加入队列的消息和一个时间值，这 个时间值默认为0，代表了消息被实际加入到队列的最小延迟时间。
[0037]如果队列中有其它消息，setTimeout消息必须等待其它消息处理完，再处 理待加入队列的消息。
[0038]步骤3、利用计数器减少展示和隐藏加载动画次数。
[0039]当进入接口处理方法时，如果计数器为0时，执行一次展示加载动画方法。 当执行宏队列任务时，如果计数器为0时，执行一次隐藏加载动画方法。具体 地说，利用计数器减少showMask()和hideMask()次数，如图3所示；
[0040]当进入接口处理方法时，如果计数器为0时，执行一次展示加载动画 showMask()；
[0041]当执行宏队列任务时，如果计数器为0时，执行一次隐藏加载动画 hideMask()。
[0042]具体地说，实现步骤为：
[0043]101、初始化计数器为0；
[0044]102、进行接口请求；
[0045]103、调用接口请求方法sendAjax()；
[0046]104、初始化展示，加载动画标识maskFlag；
[0047]105、判断maskFlag是否为true，是则进行下一步，否则转到107步骤；
[0048]106、计数器加1，执行展示加载动画方法showMask()；
[0049]107、创建axios实例，封装为request()接口请求方法，并调用request()；
[0050]108、判断request()方法是否报错，是则进行下一步，否则转到11本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用于加载动画防止频繁闪烁的方法，其特征在于包括如下步骤：步骤1，引入计数器；步骤2，将隐藏加载动画方法放在宏队列；利用事件循环机制，将展示加载动画方法和接口请求方法放在主线程，将隐藏加载动画方法放在宏队列；步骤3，利用计数器减少展示和隐藏加载动画次数；当进入接口处理方法时，如果计数器为0时，执行一次展示加载动画方法；当执行宏队列任务时，如果计数器为0时，执行一次隐藏加载动画方法。2.如权利要求1所述的用于加载动画防止频繁闪烁的方法，其特征在于所述步骤1中，初始化加载计数器为0，接口请求开始时+1，接口请求结束或者报错时
‑
1。当计数器大于1展示加载动画，等于0隐藏加载动画。3.如权利要求1所述的用于加载动画防止频繁闪烁的方法，其特征在于步骤2中，消息必须等待主线程多个接口请求消息处理完，再处理隐藏加载动画方法。4.如权利要求3所述的用于加载动画防止频繁闪烁的方法，其特征在于步骤2中，利用函数setTimeout接受两个参数：待加入队列的消息和一个时间值，这个时间值默认为0，代表了消息被实际加入到队列的最小延迟时间；如果队列中有其它消息，setTimeout消息必须等待其它消息处理完，再处理待加入队列的消息。5.如权利要求1所述的用于加载动画防止频繁闪烁的方法，其特征在于步骤3中，利用计数器减少展示加载动画showMask()和隐藏加载动画hideM...

【专利技术属性】
技术研发人员：郭富声，
申请(专利权)人：郭富声，
类型：发明
国别省市：