How to do an infinite loop with jquery queue

Question

The code I have flips 6 tiles after the page is loaded. This works fine.

var flipTiles = function() {
    $('.flip-tile').each(function( i, el ) {
        var elDelay = $(el).data('delay');
        $(el).delay(elDelay).queue(function() {
            $(this).flip(true);
            $(this).dequeue();
        });
    });
};

flipTiles();

My question is how could I make this so the tiles keep flipping. Like there page loads and the tiles flip with there own delay. After all tiles flipped I wanna restart the sequence and flip them back etc.

Any help is appreciated! Thanks in advance :)

T.J. Crowder · Accepted Answer · 2019-09-13 11:55:41Z

1

You'll need to unwrap the loop and make each step trigger the next in sequence, see comments:

var flipTiles = function() {
    // Grab the tiles
    var tiles = $('.flip-tile');
    // Start with the first tile
    var i = 0;
    // Do that tile
    next();
    function next() {
        var tile = tiles.eq(i);
        tile.delay(tile.data('delay')).queue(function() {
            tile.flip(true);
            tile.dequeue();
            // Increment `i`, wrap-around at the end
            i = (i + 1) % tiles.length;
            // Do the next tile
            next();
        });
    }
};

flipTiles();

If you want to make it possible to cancel it, return something the caller can use to do that:

var flipTiles = function() {
    var running = true;
    // Grab the tiles
    var tiles = $('.flip-tile');
    // Start with the first tile
    var i = 0;
    // Do that tile
    next();
    // Return something the caller can use to cancel
    return function() {
        running = false;
    };
    function next() {
        if (!running) {
            return;
        }
        var tile = tiles.eq(i);
        tile.delay(tile.data('delay')).queue(function() {
            tile.flip(true);
            tile.dequeue();
            // Increment `i`, wrap-around at the end
            i = (i + 1) % tiles.length;
            // Do the next tile
            next();
        });
    }
};

var cancel = flipTiles();
// (later)
cancel();

answered Sep 13, 2019 at 11:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Danilo Körber Over a year ago

This will not work, because you will enter the function next and never leave it.

T.J. Crowder Over a year ago

@DaniloKörber- No, you won't. Try it! next returns almost immediately, having scheduled some asynchronous callbacks, and then flipTiles returns almost immediately. The tiles keep flipping as the asynchronous callbacks get called by the browser's timer mechanism.

Danilo Körber Over a year ago

@t-j-crowder - I tried it and the code never leaves the function next... jsfiddle.net/dkorber/52uabqn9/6

T.J. Crowder Over a year ago

@DaniloKörber - The code in that fiddle is missing the critical aspect I called out in my comment above: Scheduling asynchronous callbacks. You've just completely discarded the relevant bit. I suggest you review delay and queue.

Danilo Körber · Accepted Answer · 2019-09-13 12:35:47Z

0

To "loop forever" you can use the setTimeout event:

myVar = setTimeout(function() { flipTiles(); }, 3000); // 3000 is the value in milliseconds to repeat the command

to stop the "loop" use

clearTimeout(myVar);

edited Sep 13, 2019 at 12:35

answered Sep 13, 2019 at 11:54

Danilo Körber

9402 gold badges9 silver badges32 bronze badges

2 Comments

Rory McCrossan Over a year ago

This won't work for two reasons. Firstly because you're providing the response of the flipTiles() function to setTimeout(), not the function reference. Secondly because you're telling it to flip 6 cards every 3 seconds, not flip them infinitely at a specific interval

Danilo Körber Over a year ago

Thanks, @rory-mcgrossan. I corrected the code that calls the function. The three seconds are only an example, he has to adjust it to his needs.

Collectives™ on Stack Overflow

How to do an infinite loop with jquery queue

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related