jQuery: $.get(url) breaks my sequential script execution

Question

My attention is to check a calculated Image URI, if it exists…

If i do this for images, that are shown as overlays:

$.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+'"/>');

my sequential Chronology is broken, so the images are not in the right position at the layers. Have I to use $.get on all images, or does $.get kills the Chronology always?

EDIT:

This is what i'am doing: enter image description here

the images have to be in order like this:

<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>

@Viktor As @Karl-AndréGagnon noticed, using `$.ajax` with `async: false` is deprecated since jQuery 1.8. — sp00m, Apr 28 '14 at 13:03
As you add many images with the same id, it's not clear what you really want. — Denys Séguret, Apr 28 '14 at 14:24
that was a mistake. Maybe the image is showing what i am doing a bit clearer — Viktor, Apr 28 '14 at 14:37

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

You can use the always callback :

$.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+'"/>');
});

Add handlers to be called when the Deferred object is either resolved or rejected.

jQuery .always()

Edit

You can create a function with a callback. The callback receive the url (fallback or good one) That function receive an array of URL and do the requests in order :

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++);
            });
    }
}

the last three images are loaded many times later, so i can't do this like that — Viktor, Apr 28 '14 at 13:30
@Viktor See my edit, i've created a function that you can reuse. — Karl-André Gagnon, Apr 28 '14 at 13:53
Are you sure that's not a `!== 'undefined`` ? Also, @Viktor the solution is to use a real promise library like Bluebird that will gladly eat this sort of problem for breakfast rather than using jQuery's extremely bad promises. — Benjamin Gruenbaum, Apr 28 '14 at 16:30

Esailija · Answer 2 · 2014-04-28T14:44:17.943

2

Using .reduce() like a boss

[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());

edited Apr 28 '14 at 14:44

answered Apr 28 '14 at 14:13

Esailija

138,174
23
272
326

Duplicate IDs, but +1 for reducing like a boss. – Benjamin Gruenbaum Apr 28 '14 at 14:15
But then the requests are sequential – Denys Séguret Apr 28 '14 at 14:19
1

@dystroy concurrent requests is even simpler but the OP wanted sequential? – Esailija Apr 28 '14 at 14:20
I think he rather wanted to put the right things at the right place. But I'm not 100% sure. EDIT : I've read the question many times... I don't get it, especially the part where many images with same ID are added :\ – Denys Séguret Apr 28 '14 at 14:21
`$.when.apply([url1,url2,url3,url4].map($.get).map(function(p){ p = p.then(null,function(e,i){ return $.get(fallback_urls[i]);}).then(function(a1,a2,a3,a4){ /* append all` – Benjamin Gruenbaum Apr 28 '14 at 14:25
@BenjaminGruenbaum .map calls $.get like (url, index, length) :P – Esailija Apr 28 '14 at 14:26

score 0 · Answer 3 · answered Apr 28 '14 at 13:11

0

or maybe as a check_function inside an if?!?

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;   
  });
};

answered Apr 28 '14 at 13:11

Viktor

623
4
10
25

no, still asynchronous. if is not waiting for get back a value. – Viktor Apr 28 '14 at 13:45

jQuery: $.get(url) breaks my sequential script execution

3 Answers3

Edit