javascript - 多个ajax调用之间的延迟

Question

我有 5 个 ajax 调用，看起来像这样(没有发布所有五个):

tabTest = {
BASE_URL : 'http://localhost/project/',
getPics : function(){

    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image1.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
                $('#pic1 img').attr("src", pic);
        }   
    });
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image2.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_two;           
                $('#pic2 img').attr("src", pic);
        }   
    });
   }
};

ajax 调用确实有效，但它们会同时触发；相反，我需要在每个调用之间设置一个延迟，这样它们就不会一次全部触发，而是只按顺序触发一次(单击时，发生在不同的函数中)，每次调用之间间隔 5 秒。

我尝试过使用“setTimeout”，但它还没有奏效。我真的不确定如何处理这个问题。

Answer 1

如果您让 AJAX 调用它自己的 setTimeout()，则没有理由不工作:

setTimeout(function(){
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image1.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
            $('#pic1 img').attr("src", pic);
        }   
    });
}, 5000);

然后每次调用将持续时间增加 5000。所以第二个看起来像:

setTimeout(function(){
    $.ajax({
        type : 'GET',
        url : this.BASE_URL +'js/image2.js',
        dataType : "json",
        async: false,
        success: function(data){
            var pic = data.images.image[0].image_one;
            $('#pic2 img').attr("src", pic);
        }   
    });
}, 10000);

您也可以将函数放在前一个请求的回调中，尽管请求失败将意味着所有后续 AJAX 请求都不会被调用。