CODEWITHSUNDEEP
javascriptjquery
Gaurav Pant
Gaurav Pant

Reputation: 4199

javascript sequential execution - deferred object etc

I need to count the number of images loaded into a page after certain time interval ( lets say 6 seconds) then need to do some processing.So after 6 seconds I am invoking scan_images_results ( ) function.

function scan_images_results ( ) {
   $.when(count_loaded_image()).then(function() {
    window.console.log("i m here");
    });
}

function count_loaded_image() {
    var counter = 0;
    $('img[id^="picThumbImg_"]').imagesLoaded()
        .progress( function( instance, image ) {
            var result = image.isLoaded ? 'loaded' : 'broken';
            console.log( 'image is ' + result + ' for ' + image.img.src );
        if(image.isLoaded) {
            counter++;
        }

        });

    console.log('counter--'+counter);
}

Output is as below.

counter--0
i m here
image is broken for https://myserver/cgi-bin/sf?f=58343d875e7a10290d0464cabfc276e5.jpg
image is broken for https://myserver/cgi-bin/sf?f=68343d875e7a10290d0464cabfc276e6.jpg
image is broken for https://myserver/cgi-bin/sf?f=78343d875e7a10290d0464cabfc276e7.jpg
.........
........ 28 times

I am using "https://github.com/desandro/imagesloaded" to check if image is loaded or not.I am getting 28 images broken, which is correct count.But my counter function is being getting executed later.i.e. my expected output is 

image is broken for https://myserver/cgi-bin/sf?f=58343d875e7a10290d0464cabfc276e5.jpg
image is broken for https://myserver/cgi-bin/sf?f=68343d875e7a10290d0464cabfc276e6.jpg
image is broken for https://myserver/cgi-bin/sf?f=78343d875e7a10290d0464cabfc276e7.jpg
.........
........ 28 times 
counter--0
I m here

I know where is the problem? I need to execute the function in sequence and for that I need to create Deferred Objects. But I could not ab able to fix my problem.

Upvotes: 0

Views: 84

Answers (1)

Kevin B
Kevin B

Reputation: 95022

You don't need $.when, you don't even need the additional function.

function scan_images_results() {
    var counter = 0;
    $('img[id^="picThumbImg_"]').imagesLoaded()
        .progress(function (instance, image) {
            var result = image.isLoaded ? 'loaded' : 'broken';
            console.log('image is ' + result + ' for ' + image.img.src);
            if (image.isLoaded) {
                counter++;
            }

        })
        .always(function () {
            console.log("I'm here");
        });

    console.log('counter--' + counter);
}

and if you wanted to keep the function,

function scan_images_results() {
    count_loaded_image().always(function () {
        console.log("I'm here");
    });
}

function count_loaded_image() {
    var counter = 0;
    return $('img[id^="picThumbImg_"]').imagesLoaded().progress(function (instance, image) {
        var result = image.isLoaded ? 'loaded' : 'broken';
        console.log('image is ' + result + ' for ' + image.img.src);
        if (image.isLoaded) {
            counter++;
        }
    });
}

Upvotes: 1

Related Questions