jQuery: $.get(url) 破坏了我的顺序脚本执行

Question

我的注意力是检查一个计算出来的 Image URI，如果它存在的话……

如果我对图像执行此操作，则会显示为叠加层：

$.get(first_url).done(function(){
  $('#any_DOM_id').append('<img id="first_image" src="'+first_url+'"/>');
}).fail(function(){
  $('#any_DOM_id').append('<img id="first_image" src="'+fallback_url+'"/>');
});

/*** HERE is something big happening and is calculated ***/
.
. 
.
. 
.
$.get(second_url).done(function(){
  $('#any_DOM_id').append('<img id="second_image" src="'+second_url+'"/>');
}).fail(function(){
  $('#any_DOM_id').append('<img id="second_image" src="'+fallback_url+'"/>');
});
.
. 
.
$.get(third_url).done(function(){
  $('#any_DOM_id').append('<img id="third_image" src="'+third_url+'"/>');
}).fail(function(){
  $('#any_DOM_id').append('<img id="third_image" src="'+fallback_url+'"/>');
});
.
. 
.
$('#any_DOM_id').append('<img id="fourth_image" src="'+fourth_url+'"/>');

我的顺序年表已损坏，因此图像在图层中的位置不正确。 我是否必须在所有图像上使用 $.get，还是 $.get 总是会杀死 Chronology？

编辑：

这就是我正在做的事情：

图像必须按如下顺序排列：

<style>
  .image_wrapper{
    position:relative;
  }
  .image_wrapper img{
    position:absolute;
  }     
</style>
<div id="image_wrapper">
  <img id="first_image" src="first_url"/>
  <img id="second_image" src="second_url"/>
  <img id="third_image" src="third_url"/>
  <img id="fourth_image" src="fourth_url"/>
</div>

Answer 1

像老板一样使用.reduce()

[first_url, second_url, third_url, fourth_url].reduce(function(promise, url) {
    return promise.then(function() {
        return $.get(url);
    }).then(function(urlContents) {
        $('#any_DOM_id').append('<img id="my_image" src="'+url+'"/>');
    }).then(null, function() {
        $('#any_DOM_id').append('<img id="my_image" src="'+fallback_url+'"/>');
        return $().promise();
    });
}, $().promise());

Answer 2

你可以使用 always 回调：

$.get(first_url).done(function(){
    $('#any_DOM_id').append('<img id="my_image" src="'+first_url+'"/>');
}).fail(function(){
    $('#any_DOM_id').append('<img id="my_image" src="'+fallback_url+'"/>');
}).always(function(){
    $('#any_DOM_id').append('<img id="my_image" src="'+second_url+'"/>');
    $('#any_DOM_id').append('<img id="my_image" src="'+third_url+'"/>');
    $('#any_DOM_id').append('<img id="my_image" src="'+fourth_url+'"/>');
});

添加要在 Deferred 对象被解析或拒绝时调用的处理程序。

jQuery .always()

---

编辑

您可以创建带有回调的函数。回调接收 url (fallback 或 good one) 该函数接收 URL 数组并按顺序执行请求：

checkURI([first_url, second_url, third_url, fourth_url], function(src){
    $('#any_DOM_id').append('<img id="my_image" src="'+src+'"/>');
})

function checkURI(uri, callback){
    get(0)
    function get(i){
        if(typeof uri[i] !== 'undefined')
            $.get(uri[i])
            .done(function(){
                callback(uri);
                get(i++);
            }).fail(function(){
                callback('YOUR FALLBACK URL');
                get(i++);
            });
    }
}

Answer 3

或者作为 if 中的 check_function?!?

if(check_uri($uri)){
  $('#any_DOM_id').append('<img id="my_image" src="'+first_url+'"/>');
}else{
  $('#any_DOM_id').append('<img id="my_image" src="'+fallback_url+'"/>');
}

var check_uri = function($uri){
  $.get($uri).done(function(){
    return true;
  }).fail(function(){
    return false;   
  });
};