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 请求都不会被调用。