javascript - 无法弄清楚何时调用哪个函数

Question

这个问题已经有答案了:

Calling functions with setTimeout() (6 个回答)

已关闭 7 年前。

有一个elements对象，它不是数组，而是类似数组的 HTML 对象。
我需要alert innerHTML每个element click 之后 1 秒内就在上面。
我编写了这段代码(如下)，但它不起作用。

[].forEach.call(elements, function (element) {
    element.onclick = () => setTimeout(alert(element.innerHTML), 1000);
});

我凭直觉知道这段代码有错误(即使没有执行)，但我不知道它在哪里以及它是什么样的(也许参数有问题？)。
使用forEach是强制性的(原始代码中使用索引器 i)。

<小时/>

也许省略了问题中无关紧要的细节，我错过了一些有意义的东西。所以我带来一段比较完整的代码:

var colors = ["red", "green", "blue"];
var fragment = document.createDocumentFragment();

colors.forEach(function (color, i) {
    var span = document.createElement("SPAN");
    span.style.backgroundColor = color;
    span.tabIndex = i + 1;
    span.onclick = () => setTimeout(console.log(span.innerHTML), 1000);
    fragment.appendChild(span);
});

Answer 1

您需要将警报包装在另一个匿名函数中:

[].forEach.call(elements, function (element) {
    element.onclick = () => setTimeout(() => alert(element.innerHTML), 1000);
});

否则在转译时它是 setTimeout(alert(element.innerHTML), 1000); 并且您需要 setTimeout(function() {alert(element.innerHTML)}, 1000);