关于click/onclick事件中函数与for循环的执行机制问题

一个正常的执行机制

先附上这样一段代码

var num = 0;
function aaa() {
show();
for(let i=0;i<1000000000;i++){
num ++;
}
hide();
console.log(num);
}
aaa();
function show() {
document.getElementsByClassName('ss')[0].style.display = 'none';
}
function hide() {
document.getElementsByClassName('ss')[0].style.display = 'block';
}

标签就不贴了，我们能直接看到 class为 ss 的元素在页面刚加载时就被隐藏掉，等for循环结束后，又再次显示，这是正常的执行机制。

放在onclick事件中

当把函数 aaa 放在onclick事件中，你会发现元素 几乎 没变化，其实它是在for循环执行完毕后连续运行的show和hide函数。造成这个问题的原因就是 click事件 属于回调函数，它内部的执行都是异步的，而且我还发现了一个问题，工作这么多年也是才知道，js中的dom操作 也属于异步操作（谁没事研究这个），所以导致执行机制的变化，异步函数被堆放在最后执行。

解决办法

function aaa() {
show();
setTimeout(function () {
for(let i=0;i<1000000000;i++){
num ++;
}
hide();
console.log(num);
},100);
}

我的想法是加个定时器，不知道有没有更好的解决办法。第一次发表文章，大家多多海涵。