javascript - jQuery 在列表中添加删除类，中间有延迟

Question

我想将一个类添加到一个 div，然后删除该类并移动到下一个 div 并执行相同的操作。以下工作几乎完美:

var f = jQuery('.ls-slide').find('div.main-img-label');

function recursive(i) {
    f.removeClass('blue-flash').eq(i).addClass('blue-flash');
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}
recursive(0);

唯一的区别是我希望在删除类和在下一个项目上添加类之间有一个延迟。

例如 div.main-img-label 是一个红色圆圈，类 blue-flash 将圆圈变为蓝色。但看起来蓝色从一个移到另一个，我希望一个变成蓝色，然后在另一个圆变成蓝色之前它们都再次变成红色。

Answer 1

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
    }, 1000);
    setTimeout(function () {
        recursive(++i % f.length)
    }, 3000);
}

或

function recursive(i) {
    f.removeClass('blue-flash');
    setTimeout(function () {
        f.eq(i).addClass('blue-flash');
        setTimeout(function () {
            recursive(++i % f.length)
        }, 2000);
    }, 1000);
}

更新:在这里 fiddle :https://jsfiddle.net/robbyn/9ya46tj4/