Javascript 如何使用jquery队列执行无限循环

加载页面后，我的代码将翻转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();

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

感谢您的帮助！ 提前感谢：）

要“永远循环”，您可以使用

设置超时事件：

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

要停止“循环”，请使用

您需要展开循环，并使每一步按顺序触发下一步，请参见注释：

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

这将不起作用，因为您将进入函数
next
，并且永远不会离开它。@DaniloKörber-不，您不会离开的。试试看
next
几乎立即返回，已安排了一些异步回调，然后
flipTiles
几乎立即返回。当浏览器的计时器机制调用异步回调时，程序块不断翻转。@t-j-crowder-我尝试过，代码从未离开函数
next
@DaniloKörber—该提琴中的代码缺少我在上面的评论中提到的关键方面：调度异步回调。您刚刚完全放弃了相关的部分。我建议你复习一下，这不管用，原因有二。首先，因为您提供的是
flipTiles（）
函数对
setTimeout（）
的响应，而不是函数引用。第二，因为你告诉它每3秒钟翻转6张卡片，而不是在特定的间隔无限地翻转它们谢谢，@rory mcgrossan。我更正了调用该函数的代码。三秒钟只是一个例子，他必须根据自己的需要调整它。
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();