多个ajax请求,页面渲染顺序问题

javascript
  目录
  1. 1. 多个ajax请求,页面渲染顺序问题

在一个页面中,多个ajax请求,页面渲染顺序问题。

多个ajax请求,页面渲染顺序问题

如题，比如说在一个页面中有两个按钮或者多个，按照先后顺序点击，都发出了ajax请求，但是他们返回的顺序就不会按照点击按钮的顺序返回，如果，它们操作的是页面的同一个显示区域，比如列表，那就ajax访问最慢的接口最后被渲染出来，有可能这个接口是用户最开始点击的按钮渲染出来的，这样就会产生错误信息，用户本想最后点击那个按钮返回的数据才是他想要的。
其实，这个问题我并没有遇到过，这个是大约一年前我再一次面试中被问到的，当时由于没有做好准备，我也只能诚实的回答没有遇到过此场景，今天我又来了兴致，把它的解决方法记录下来（我的拖延症是不是很严重），这个解决方式是我自己定的，其实也是实现起来比较简单的。
为了加快写作，直接把代码贴出来，在代码中写注释

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="./jquery.js"></script>
  <title>多个ajax请求,页面渲染顺序问题</title>
  <style>
    .content {
      width: 500px;
      height: 100px;
      background-color: #eeeeee;
    }
  </style>
</head>
<body>
  <div class="content">
    原始内容
  </div>
  <button id="btn1">按钮2s</button>
  <button id="btn2">按钮5s</button>
  <button id="btn3">按钮3s</button>
</body>
<script>
  // 后端地址
  var baseUrl = "http://localhost:3000/";

  // 存放ajax标志的数组，用来区分是哪个ajax
  var orderArr = [];
  // 按钮1加点击事件
  $('#btn1').on('click', function() {
    // 将btn1按钮的标志传入数组
    ajaxOrder('btn1');
    $.post(baseUrl+'delay2s', (res)=> {
      // 渲染页面
      render('btn1', res.data);
    });
  });
  // 按钮2加点击事件
  $('#btn2').on('click', function() {
    ajaxOrder('btn2');
    $.post(baseUrl+'delay5s', (res)=> {
      render('btn2', res.data);
    });
  });
  // 按钮3加点击事件
  $('#btn3').on('click', function() {
    ajaxOrder('btn3');
    $.post(baseUrl+'delay3s', (res)=> {
      render('btn3', res.data);
    });
  });
  
  // 向存放ajax标志位数组中push ajax标志
  function ajaxOrder(flag) {
    orderArr.push(flag);
  }

  // 根据ajax的标志来渲染页面
  function render(flag, val) {
    // 如果数组中只有一个标志的情况，直接渲染并清空数组
    if(orderArr.length === 1) {
      orderArr = [];
      $('.content').html(val);
      return void 0;
    }
    // 如果标志数组中多余一个标志
    if(orderArr.length > 1) {
      // 如果这个标志是第一个请求的标志，则渲染页面
      if(orderArr.indexOf(flag) === 0) {
        orderArr.shift();
        $('.content').html(val);
        return void 0;
      }else { // 如果不是第一个，则不渲染页面，并把这个标志剔除
        let index = orderArr.indexOf(flag);
        orderArr.splice(index,1);
      }
    }
  }
</script>
</html>

大概的流程就是，按照按钮点击的顺序来显示请求的结果。

  面试题