Leo

提升前后端数据交互过程的用户体验

用户体验
字数统计: 479阅读时长: 1 min
2015/04/03 Share

通常我们在进行Ajax交互的时候，如果用户等待时间过长，那么没有一个loading动画反馈的话。会让用户迷惑，误以为页面死掉，无反应或者是其它原因。

一般方案

  • 即将跑Ajax之前，Show loading
  • Ajax响应回调时，Hide Loading
1
2
3
4
5
6
7
8
9
10
11
showLoading();

ajax(succ => {
    hideLoading();
    
    // 其它代码
}, error => {
    hideLoading();
    
    // 其它代码
});

不足

  • 某些请求过快，会导致页面出现‘闪现’的效果。

需求

  • 既然有这样的不足，那么我们可不可以避免掉一些过快响应的请求免于出现loading动画呢？

升级方案

  • 即将跑Ajax之前，采用定时器来Show loading
  • Ajax响应回调时，清除定时器，Hide Loading
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let t = setTimeout(_ => {
    showLoading();
}, 400);

ajax(succ => {
    clearTimeout(t);
    hideLoading();
    
    // 其它代码
}, error => {
    clearTimeout(t);
    hideLoading();
    
    // 其它代码
});

原理

因为设置了延时400毫秒来执行Show Loading。如果Ajax回调赶在400毫秒内执行清除定时器。那么loading动画将不会出现

不足

某些巧合的原因，假如这个回调在Ajax后的第500毫秒才执行呢？
岂不是还会出现存活100毫秒‘闪现’。

再升级方案

  • 即将跑Ajax之前，设定一个标记，用于判断loading动画是否有触发
  • 采用定时器来Show loading
  • Ajax响应回调时，如果标记反应loading动画有被执行，给hide loading延时执行
  • 标记复位、清除定时器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let flag = false;

let t = setTimeout(_ => {
    flag = true;
    showLoading();
}, 400);

ajax(succ => {
    clearTimeout(t);
    
    if (flag) {
        setTimeout(_ => {
            flag = false;
            hideLoading();    
        }, 300);
    } else {
        hideLoading();
    }
    
    // 其它代码
}, error => {
    clearTimeout(t);
    
    if (flag) {
        setTimeout(_ => {
            hideLoading();    
        }, 300);
    } else {
        hideLoading();
    }
    
    // 其它代码
});

原理

如果loading动画赶在被清除前被执行了，为了缓解‘闪现’问题，给关闭loading延时一点儿来执行

原文作者：Leo

原文链接：http://leochan2017.github.io/2015/04/03/提升前后端数据交互过程的用户体验/

发表日期：April 3rd 2015, 7:32:07 pm

更新日期：July 16th 2019, 5:47:05 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可