CODEWITHSUNDEEP
javascriptjqueryfunction
MillerMedia
MillerMedia

Reputation: 3671

Callback Function Not Working With .Queue()

I'm trying to run a loop on some images where I change an img's src several times. I want it to loop back through again once it completes so it's a continuous scroll of images. I've set up my function like this:

function img_loop(){
        console.log('test');
        console.log(this_value.attr('src'));

        this_value
        .queue(function(next) {
            this_value.attr('src',new_img_src); next();
        })
        .delay(2000)
        .queue(function(next) {
            this_value.attr('src',new_img_src_2); next();
        })
        .delay(2000)
        .queue(function(next) {
            this_value.attr('src',img_src); next();
        })
        .delay(2000)
        .queue(function() {
        img_loop();
    });
}

img_loop();

It runs successfully once time through. The curious things is that it logs to the console, runs once through and then logs to the console again meaning it's called the function again but I suppose it stops right at the first queue function. I ran a console in that first queue function and can confirm that it doesn't run the second time through.

I'm assuming there is a limitation on using queue() in a callback function? Any ideas on why it wouldn't run again?

EDIT

In reference to the answer below, I tried this with the function having a parameter and then have it loop putting that parameter back in, but unfortunately this did not work:

function img_loop(the_image){
        var that = the_image;

        console.log(the_image);

        the_image
        .queue(function(next) {
            the_image.attr('src',new_img_src); next();
        })
        .delay(2000)
        .queue(function(next) {
            the_image.attr('src',img_src); next();
        })
        .delay(2000)
        .queue(function() {
            img_loop(that);
        });
}

    img_loop(me);

When I log it out in the console, it displays the same content so it retains the value after the loop is run through once. I'm not sure why it doesn't trigger again?

Just showing my progress in case anyone else has ideas?

Upvotes: 0

Views: 103

Answers (1)

user3417400
user3417400

Reputation: 401

If when you write this_value you're talking about the this keyword (the context of the function), maybe the value of this is lost in the second call to img_loop.

EDIT

I've been thinking about your code again, in the last .queue call you don't execute the queue, either by calling next() or by calling .dequeue()

I've changed made modifications to the following code, try this one.

function img_loop(the_image){
    console.log(the_image);
    the_image
    .queue(function(next) {
        the_image.attr('src',new_img_src); next();
    })
    .delay(2000)
    .queue(function(next) {
        the_image.attr('src',new_img_src_2); next();
    })
    .delay(2000)
    .queue(function(next) {
        the_image.attr('src',img_src); next();
    })
    .delay(2000)
    .queue(function() {
        img_loop.(the_image);
        $(this).dequeue();
  });
}

img_loop(me);

Upvotes: 1

Related Questions