JavaScript 代码执行延迟

Question

function append(what) {
    $("#drawer").append(what);
}

function outerHtml(o) {
    return $("<div />").append($(o).clone()).html();
}

var allPixel = [];

$(".pix").each(function() {
    allPixel.push(outerHtml($(this)));
});

$("#drawer").empty();

var index;

for (index = 0; index < allPixel.length; index++) {
    pixel = allPixel[index];
    setTimeout(append(pixel), 100);
}

我有一个容器 (#drawer)，其中充满了许多 div 元素。在此函数中，每个 div 元素的 HTML 都单独保存在数组中。完成后，div 元素将被清除。

数组中的 allPixel 现在都是 div 元素。我希望每个 div 元素都会延迟 100 毫秒添加到 #drawer 中。

问题:

如果我运行这个函数，什么也不会发生(div 不会消失/出现)。我做错了什么？

如果有任何不清楚的地方，请随时告诉我，我将编辑我的问题。

提出的问题...查看实际操作:https://wiese2.lima-city.de/test/

Answer 1

您正在调用立即调用的方法并将其返回值(即 undefined)传递给 setTimeout 。

您可以设置当计时器到期时要传递给 append 函数的附加参数 setTimeout方法。

使用

setTimeout(append, 100 * (i + 1), pixel);

此外，您还需要根据元素索引增加计时器