LoadingDelay

有些时候,当请求返回足够快的情况下,loading 可能会在短时间内完成 false -> true -> false 状态的切换。这时候,加载动画可能会出现闪烁的情况(特别是占满一整屏的动画),这给会用户带来糟糕的体验。

因此最好的方法就是设定一个延迟值,当等待时间大于延迟值时 loading 才会被设置成 true,如下所示

当然,世事无绝对。假如我们把 loadingDelay 设置成了 400ms ,但实际上我的请求在 500ms 完成了,这时还是无法避免会出现闪烁。因此,我们需要引入一个新的 API loadingKeep

LoadingKeep

loadingKeep 可以让 loading 持续指定的时间

如果请求时间少于指定的时间,则最终时间为指定的时间

如果请求时间大于指定的时间,则最终时间为请求的时间

我们可以使用 loadingKeep 对上面提出的例子进行一个改进。

  • 如果在指定的时间内完成了请求,那就不展示 loading 动画,超过指定时间后才进行展示
  • 如果展示了 loading 动画,那至少要展示足够长的时间,不能一闪而过

你也可以单独使用 loadingKeep,让 loading 持续指定的时间

上次更新: 2023/7/6 03:23:08
贡献者: John