LoadingDelay
有些时候,当请求返回足够快的情况下,loading 可能会在短时间内完成 false -> true -> false
状态的切换。这时候,加载动画可能会出现闪烁的情况(特别是占满一整屏的动画),这给会用户带来糟糕的体验。
因此最好的方法就是设定一个延迟值,当等待时间大于延迟值时 loading 才会被设置成 true
,如下所示
当然,世事无绝对。假如我们把 loadingDelay
设置成了 400ms ,但实际上我的请求在 500ms 完成了,这时还是无法避免会出现闪烁。因此,我们需要引入一个新的 API loadingKeep
LoadingKeep
loadingKeep
可以让 loading 持续指定的时间
如果请求时间少于指定的时间,则最终时间为指定的时间
如果请求时间大于指定的时间,则最终时间为请求的时间
我们可以使用 loadingKeep
对上面提出的例子进行一个改进。
- 如果在指定的时间内完成了请求,那就不展示 loading 动画,超过指定时间后才进行展示
- 如果展示了 loading 动画,那至少要展示足够长的时间,不能一闪而过
你也可以单独使用 loadingKeep
,让 loading 持续指定的时间