javascript - 如何使用jquery队列进行无限循环

Question

我的代码在页面加载后翻转 6 个图 block 。这工作得很好。

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

我的问题是我怎样才能做到这一点，让瓷砖不断翻转。就像页面加载和图 block 翻转一样，有自己的延迟。所有瓷砖翻转后，我想重新启动序列并将它们翻转回来等等。

感谢任何帮助!预先感谢:)

Answer 1

您需要解开循环并使每个步骤按顺序触发下一个步骤，请参阅注释:

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

如果您想让取消它成为可能，请返回调用者可以用来执行此操作的内容:

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