AJAX请求如何依次执行。

Question

产品要写一个类似检测的东西
有四块内容检测，要发四个AJAX。
我想到的$,when
但是用这个的话，后面三个done时间是立马执行的。
我就写了一个settimeout

但是里面有一个依次打对号的我就写了一个setInterval
但是这个时间老是对不上。
发现写法很有问题 有没有什么好点的写法 或者指出我的错误。

$('.txturl button').click(function() {
            var count = 0
            $.when($.ajax({
                type: "get",
                url: "http://www.webossgoo3.com/google/CheckContent",
                async: true,
                success: function(data) {
                    var pardata = JSON.parse(data)
                    $('.gdt').addClass('layui-anim layui-anim-rotate layui-anim-loop');
                    $('.coun-jc').hide();
                    $('.txt-bet li').removeClass('active')
                    $('.txtnum section span.load-jc').css('display', 'table-cell');
                    if(pardata.title) {
                        $('.cont2 i').html('ဆ')
                        $('.cont2 i').css('color', 'red')
                        for(j in pardata.title) {
                            $('.contentul ul').eq(0).append(
                                "<li>" + j + ":" + pardata.title[j] + "</li>"
                            )
                        }
                    };
                    for(k in pardata.keywords) {
                        $('.contentul ul').eq(1).append(
                            "<li>" + k + ":" + pardata.keywords[k] + "</li>"
                        )
                    }
                    if(!pardata.original) {
                        $('.cont1 i').html('&#x1006;');
                        $('.cont1 i').css('color', 'red')
                    }
                        var i = 0;
                    setInterval(function() {
                        if(i <= $('.basetxt table i').size() - 1 ) {
                            $('.basetxt table i').eq(i).show()
                            i++
                        } else {
                            $('.txt-bet li').eq(0).addClass('active')
                            return false
                        }
                    }, 500) 
                },
                error: function() {
                    layer.msg('检测失败1')
                }
            })).done(function() {
                setTimeout(function  () {
                    $.ajax({
                        type: "get",
                        url: "http://www.webossgoo3.com/google/checkSearch",
                        async: true,
                        success: function(data) {
                            var pardata = JSON.parse(data)
                            if (pardata.google) {
                                $('.cont3 i').html('&#x1006;')
                                $('.cont3 i').css('color', 'red')
                            }
                            if (pardata.bing) {
                                $('.cont4 i').html('&#x1006;')
                                $('.cont4 i').css('color', 'red')
                            }
                            if (pardata.yahoo) {
                                $('.cont5 i').html('&#x1006;')
                                $('.cont5 i').css('color', 'red')
                            }
                            if (pardata.title_top1) {
                                $('.cont6 i').html('&#x1006;')
                                $('.cont7 i').css('color', 'red')
                            }
                            var a = 0;
                            setInterval(function() {
                                if(a <= $('.seartxt  table i').length - 1) {
                                    $('.seartxt table i').eq(a).show()
                                    a++
                                } else {
                                    $('.txt-bet li').eq(1).addClass('active')
                                    return false
                                }
                            }, 500)
                        },
                        error: function() {
                            layer.msg('检测失败2')
                        }
                    })
                })
                
            }).done(function() {
                setTimeout(function  () {
                    $.ajax({
                        type: "get",
                        url: "http://www.webossgoo3.com/google/CheckSearch",
                        async: true,
                        success: function(data) {
                            var pardata = JSON.parse(data)
                            var i = 0;
                            setInterval(function() {
                                if(i <= $('.seotxt  table i').length - 1) {
                                    $('.seotxt  table i').eq(i).show()
                                    i++
                                } else {
                                    $('.txt-bet li').eq(2).addClass('active')
                                    return false
                                }
                            }, 500)
                        },
                        error: function() {
                            layer.msg('检测失败3')
                        }
                    })
                },500 * ($('.seartxt  table i').length) )
            }).done(function() {
                setTimeout(function  () {
                    $.ajax({
                        type: "get",
                        url: "http://www.webossgoo3.com/google/CheckContent",
                        async: true,
                        success: function(data) {
                            var pardata = JSON.parse(data)
                            var i = 0;
                            setInterval(function() {
                                if(i <= $('.basetxt table i').length - 1) {
                                    $('.opttxt table i').eq(i).show()
                                    i++
                                } else {
                                    $('.txt-bet li').eq(3).addClass('active')
                                    $('.gdt').removeClass('layui-anim layui-anim-rotate layui-anim-loop');
                                    $('.coun-jc').show()
                                    $('.coun-jc').text('88')
                                    $('.txtnum section span.load-jc').css('display', 'none');
                                    return false
                                }
                            }, 500)
                        },
                        error: function() {
                            layer.msg('检测失败4')
                        }
                    })
                },500 * ($('.seotxt  table i').length)  +  500 * ($('.seartxt  table i').length)  )
            })
        })

Answer 1

1. 用promise
2. 自己创建事件流

  // 事件流
  let eventBus = $('<i></i>')
  eventBus.on('event1Done', doEvent2)
  eventBus.on('event2Done', doEvent3)

  function doEvent1() {
    $.ajax({
      url: 'http://www.baidu.com',
      error: function () {
        eventBus.trigger('event1Done', {msg: 'event1 done'})
        // trigger触发下个事件并传递参数
      }
    })
  }
  function doEvent2 (event, data) {
    // data接收上个事件的参数
    // 同1
  }
  function doEvent3 (event, data) {
    // 同2
  }
  doEvent1()

Answer 2

最简单的方法当然是用 ES6 Promise 的 then 来执行了，当然如果用 ES2017 的 async/await 语法更帅。假设每个 ajax 调用都被封装成一个函数，ajax1(), ajax2() ... 这样

比如 ajax1 可以封装成

function ajax1() {
    const deffered = $.Deffered();
    $.ajax(....)
        .done(data => {
            dealWith(data);
            deferred.resolve(data)
        })
        .fail(() => deferred.reject());
    return deffered.promise();
}

jQuery 的 Ajax 或 Deferred/Promise 本来就是一个 thenable，所以可以

ajax1()

.then(ajax2)
.then(ajax3)
.then(ajax4);

用 async/await 语法可以这样写

async function doIt() {
    await ajax1();
    await ajax2();
    await ajax3();
    await ajax4();
}

Answer 3

$('.txturl button').click(function () {
    var count = 0
    $.when($.ajax({
        type: "get",
        url: "http://www.webossgoo3.com/google/CheckContent",
        async: true,
        success: function (data) {
            var pardata = JSON.parse(data)
            $('.gdt').addClass('layui-anim layui-anim-rotate layui-anim-loop');
            $('.coun-jc').hide();
            $('.txt-bet li').removeClass('active')
            $('.txtnum section span.load-jc').css('display', 'table-cell');
            if (pardata.title) {
                $('.cont2 i').html('ဆ')
                $('.cont2 i').css('color', 'red')
                for (j in pardata.title) {
                    $('.contentul ul').eq(0).append(
                        "<li>" + j + ":" + pardata.title[j] + "</li>"
                    )
                }
            };
            for (k in pardata.keywords) {
                $('.contentul ul').eq(1).append(
                    "<li>" + k + ":" + pardata.keywords[k] + "</li>"
                )
            }
            if (!pardata.original) {
                $('.cont1 i').html('&#x1006;');
                $('.cont1 i').css('color', 'red')
            }
            var i = 0;
            setInterval(function () {
                if (i <= $('.basetxt table i').size() - 1) {
                    $('.basetxt table i').eq(i).show()
                    i++
                } else {
                    $('.txt-bet li').eq(0).addClass('active')
                    return false
                }
            }, 500)
        },
        error: function () {
            layer.msg('检测失败1')
        }
    })).done(function () {
        return $.ajax({
            type: "get",
            url: "http://www.webossgoo3.com/google/checkSearch",
            async: true,
            success: function (data) {
                var pardata = JSON.parse(data)
                if (pardata.google) {
                    $('.cont3 i').html('&#x1006;')
                    $('.cont3 i').css('color', 'red')
                }
                if (pardata.bing) {
                    $('.cont4 i').html('&#x1006;')
                    $('.cont4 i').css('color', 'red')
                }
                if (pardata.yahoo) {
                    $('.cont5 i').html('&#x1006;')
                    $('.cont5 i').css('color', 'red')
                }
                if (pardata.title_top1) {
                    $('.cont6 i').html('&#x1006;')
                    $('.cont7 i').css('color', 'red')
                }
                var a = 0;
                setInterval(function () {
                    if (a <= $('.seartxt  table i').length - 1) {
                        $('.seartxt table i').eq(a).show()
                        a++
                    } else {
                        $('.txt-bet li').eq(1).addClass('active')
                        return false
                    }
                }, 500)
            },
            error: function () {
                layer.msg('检测失败2')
            }
        })

    }).done(function () {
        return $.ajax({
            type: "get",
            url: "http://www.webossgoo3.com/google/CheckSearch",
            async: true,
            success: function (data) {
                var pardata = JSON.parse(data)
                var i = 0;
                setInterval(function () {
                    if (i <= $('.seotxt  table i').length - 1) {
                        $('.seotxt  table i').eq(i).show()
                        i++
                    } else {
                        $('.txt-bet li').eq(2).addClass('active')
                        return false
                    }
                }, 500)
            },
            error: function () {
                layer.msg('检测失败3')
            }
        })
    }).done(function () {
        return $.ajax({
            type: "get",
            url: "http://www.webossgoo3.com/google/CheckContent",
            async: true,
            success: function (data) {
                var pardata = JSON.parse(data)
                var i = 0;
                setInterval(function () {
                    if (i <= $('.basetxt table i').length - 1) {
                        $('.opttxt table i').eq(i).show()
                        i++
                    } else {
                        $('.txt-bet li').eq(3).addClass('active')
                        $('.gdt').removeClass('layui-anim layui-anim-rotate layui-anim-loop');
                        $('.coun-jc').show()
                        $('.coun-jc').text('88')
                        $('.txtnum section span.load-jc').css('display', 'none');
                        return false
                    }
                }, 500)
            },
            error: function () {
                layer.msg('检测失败4')
            }
        })
    })
})

Answer 4

最简单的你就在每个ajax请求的complete函数里去执行下一个ajax请求咯

Answer 5

可以了解一下ES6的generator方法

Answer 6

最简单的方法是修改ajax的属性，把默认的异步改成同步

Answer 7

你可以利用Promise机制，把四个请求写成四部分，然后按照顺序执行，比如A() B() C() D()四个函数，可以写成：

.`

A() //A的ajax成功后，利用resove跳出，进入B中进行下一个ajax，以此列推
.then(function() {
    B()
})
.then(function() {
    C()
})
.then(function() {
    D()
})  

`