Question

以下代码块出现问题：

        $('.merge').each(function(index) {
            var mergeEl = $(this);
            setTimeout(function() {
                self.mergeOne(mergeEl, self, index - (length - 1));
            }, 500);
        });

我正在尝试在mergeOne的每次调用之间应用.500秒延迟，但此代码仅在同时在阵列中的所有元素上调用mergeOne之前应用.500秒延迟。

如果有人可以解释为什么这段代码不起作用，而且可能是一个非常棒的工作解决方案，谢谢！

Answer 1

这是一个可用于遍历jQuery对象集合的通用函数，每次迭代之间都有延迟：

function delayedEach($els, timeout, callback, continuous) {
    var iterator;

    iterator = function (index) {
        var cur;

        if (index >= $els.length) {
            if (!continuous) {
                return;
            }
            index = 0;
        }

        cur = $els[index];
        callback.call(cur, index, cur);

        setTimeout(function () {
            iterator(++index);
        }, timeout);
    };

    iterator(0);
}

DEMO： http://jsfiddle.net/7Ra9K/（循环播放一次）

DEMO： http://jsfiddle.net/42tXp/（连续循环）

传递给回调的上下文和参数应该与.each()的方式相同。

如果你想把它变成一个jQuery插件，那么可以像$("selector").delayedEach(5000, func...那样调用它，那么你可以使用它：

$.fn.delayedEach = function (timeout, callback, continuous) {
    var $els, iterator;

    $els = this;
    iterator = function (index) {
        var cur;

        if (index >= $els.length) {
            if (!continuous) {
                return;
            }
            index = 0;
        }

        cur = $els[index];
        callback.call(cur, index, cur);

        setTimeout(function () {
            iterator(++index);
        }, timeout);
    };

    iterator(0);
};

DEMO： http://jsfiddle.net/VGH25/（循环播放一次）

DEMO： http://jsfiddle.net/NYdp7/（连续循环）

<强>更新

我添加了连续循环遍历元素的功能，作为额外参数。传递true将不断循环，而传递false或没有任何东西（或虚假的东西）只会循环遍历元素一次。代码和小提琴包括更改。

在jQuery的.each（）方法的每次迭代之间应用延迟

1 个答案: