为什么控制台在刷新页面时记录 2 个不同的元素输出？

Question

Chrome DevTools 中的控制台在我刷新页面时随机给我 2 个不同的

console.log

输出。

代码：

function createItem(name, parent, liClasses, btnClasses, iClasses) {
    const div = document.getElementById(parent);
    const li = createLi(name, liClasses);
    const btn = createButton(btnClasses);
    const i = createIcon(iClasses);

    btn.appendChild(i);
    li.appendChild(btn);
    div.appendChild(li);

    return div;
}

console.log(
    createItem('Coffee', 'main', 'li classes', 'btn classes', 'i classes')
);

Chrome DevTools 输出 1：

输出2：

知道为什么会这样吗？

Answer 1

console

可能在其执行的不同阶段记录函数

createItem()

的输出由于函数中某些操作的异步性质.

为了确保一致的日志输出，您可以将函数调用包装在一个

setTimeout()

函数中，延迟为

0 milliseconds

：

setTimeout(() => {
    console.log(createItem('Coffee', 'main', 'li classes', 'btn classes', 'i classes'));
}, 0);

这将确保

console.log()

语句在函数执行完成并且所有异步操作完成后执行。