firing function after first one is finished

Question

I am cofused who I should use callbacks in this situation:

I and fire displayHighlights() function after highlightImages() is finished, so I don't need to use setTimeout()

First function is validation if images are not throwing errors, second is displaying only three of them.

  <ul class="clear">
     <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li>
     <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li>
     <li style="display : none" class="highlight-photos"><a class="highlight_photo"></a></li>
   </ul>


function highlightImages() {
    $(".highlight_photo").each(function() {
        var fileName = $(this).data('url')
        var image = new Image();
        var that = $(this);
        image.onerror = badImage;
        image.src = fileName;
        function badImage( event) {
            var el = $(".highlight_photo[data-url='" + fileName+ "']");
            el.parent().remove();
        }
    });
 setTimeout(function(){displayHighlights();},500);
};

function displayHighlights() {
    if ($(".highlight_photo").parent().length <= 3 ) {
        $(".highlight-photos").show();
    } else {
        $("ul.clear li:lt(3)").addClass("visible");
        $(".highlight-photos").not(".visible").remove();
        $("ul.clear li:lt(3)").show();
    }
}

score 0 · Answer 1 · answered Jun 13 '14 at 17:49

One solution would be to add an onlaod event to all of the images.

So when adding the image increase a counter like : images loading.

Before!!! adding src attribute to the image attach an onload handler, that will decrease the same counter.

var images_loading = 0; //setting the counter

function highlightImages() {
    $(".highlight_photo").each(function() {
        var fileName = $(this).data('url')
        var image = new Image();
        var that = $(this);
        image.onerror = badImage;
        images_loading++; //yuou are loading one more image
        image.onload = function(){images_loading--; //when it is loaded, it is ok}
        image.src = fileName;
        function badImage( event) {
            images_loading--; //if it fails, remove from loading
            var el = $(".highlight_photo[data-url='" + fileName+ "']");
            el.parent().remove();
        }
    });
    var can_highlight = false;
    while(!can_highlight){
       if(images_loading == 0){
           //all the images are loaded
           can_highlight = true;
           displayHighlights();
       } else {
           setTimeout(1) //sparing cpu
       }
    }
};

score 0 · Answer 2 · answered Jun 13 '14 at 17:50

I would try using a promise for your each statement.

For example:

JavaScript:

$.when(highlightImages()).done(function () {
    console.log('highlightImages complete!');
    displayHighlights();
});


function highlightImages() {
    $(".highlight_photo").each(function (key, val) {
        console.log(val);
    });
};

function displayHighlights() {
    console.log('displayHighlights called');
};

JSFiddle

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

You can also use jquery deferred function as described here

best

M

edited May 23 '17 at 12:27

Community

1
1

answered Jun 13 '14 at 17:55

mboeckle

938
13
29

firing function after first one is finished

3 Answers3