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

问题描述 投票:0回答:1

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:

知道为什么会这样吗?

javascript google-chrome console
1个回答
0
投票

console
可能在其执行的不同阶段记录函数
createItem()
的输出由于函数中某些操作的异步性质.

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

setTimeout()
函数中,延迟为
0 milliseconds

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

这将确保

console.log()
语句在函数执行完成并且所有异步操作完成后执行。

© www.soinside.com 2019 - 2024. All rights reserved.