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:
知道为什么会这样吗?
console
可能在其执行的不同阶段记录函数 createItem()
的输出由于函数中某些操作的异步性质.
为了确保一致的日志输出,您可以将函数调用包装在一个
setTimeout()
函数中,延迟为0 milliseconds
:
setTimeout(() => {
console.log(createItem('Coffee', 'main', 'li classes', 'btn classes', 'i classes'));
}, 0);
这将确保
console.log()
语句在函数执行完成并且所有异步操作完成后执行。