javascript - setTimeout-caption 替代方案

Question

我想知道我们是否可以做一些更优化的事情，而不仅仅是多次嵌套 setTimeout 来为一堆元素一个接一个地设置动画，就像这个丑陋的东西:

    setTimeout(function () {
        $('div[data-order="0"]').parent().removeClass('flipped');
        setTimeout(function () {
            $('div[data-order="1"]').parent().removeClass('flipped');
            setTimeout(function () {
               $('div[data-order="2"]').parent().removeClass('flipped');
            }, 75);
        }, 75);
    }, 75);

Answer 1

您可以使用一个函数:

function flipByOrder(order) {
    $('div[data-order="' + order + '"]').parent().removeClass('flipped');
    if (order <= 1) {
        setTimeout(function() { flipByOrder(order + 1); }, 75);
    }
}
flipByOrder(0);

您还可以使用setInterval:

var order = 0;
var interval = setInterval(function() {
    $('div[data-order="' + order + '"]').parent().removeClass('flipped');
    order++;
    if (order > 2) clearInterval(interval);
}, 75);