如何用jquery队列做一个无限循环

Question

页面加载后，我的代码翻转了 6 个图块。 这很好用。

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

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

任何帮助表示赞赏！ 在此先感谢:)

Answer 1

您需要解开循环并让每个步骤按顺序触发下一个步骤，请参阅 cmets：

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

Answer 2

要“永远循环”，您可以使用setTimeout 事件：

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

停止“循环”使用

clearTimeout(myVar);