按钮点击后添加子Div并延迟清除父元素的显示问题求助

嘿，我来帮你捋清楚这个问题！你遇到的核心问题其实和Ajax异步机制无关，而是浏览器的JS执行线程与UI渲染线程是互斥的——你自己写的wait函数是同步阻塞的，直接把浏览器的渲染流程给卡死了。

为什么当前代码看不到子Div？ #

咱们一步步拆解执行流程：

1. 点击按钮调用mocktimeout，首先执行document.getElementById("input").innerHTML = "<div class=\"loader\"> </div>";——这一步只是把DOM修改请求放进了浏览器的任务队列，但浏览器还没来得及执行渲染，因为JS线程还在忙着运行后面的代码。
2. 接着调用waitfor，里面的wait(3000)是一个同步的while循环：它会霸占JS线程整整3秒，这段时间里浏览器完全没法处理渲染任务，自然看不到刚添加的loader。
3. 3秒后同步循环结束，立刻执行callback()把input的内容清空。等JS线程终于释放时，浏览器要渲染的是清空后的状态，所以你根本看不到loader的影子。

为什么移除部分代码会有不同表现？ #

• 移除清空代码：同步循环结束后JS线程释放，浏览器才会回头渲染之前添加的loader，所以看起来是等3秒才显示。
• 移除等待代码：JS执行完添加DOM的操作就结束了，浏览器立刻渲染，所以loader能马上显示。

正确的解决方案 #

别用同步循环模拟等待，这会导致页面假死！改用浏览器提供的异步API setTimeout，它不会阻塞JS线程，给浏览器留足渲染时间。

修改后的最简代码

直接替换mocktimeout函数，删掉没用的wait和waitfor：

function mocktimeout(q) {
    // 先添加loader，浏览器能立刻渲染
    document.getElementById("input").innerHTML = "<div class=\"loader\"> </div>";
    // 3秒后异步执行清空操作
    setTimeout(function setQuality(){ 
        quality = q; 
        document.getElementById("input").innerHTML = "";
    }, 3000);
}

如果想保留waitfor的结构

也可以把waitfor改成异步版本：

function waitfor(callback) {
    // 用setTimeout代替同步阻塞的wait
    setTimeout(callback, 3000);
}

function mocktimeout(q) {
    document.getElementById("input").innerHTML = "<div class=\"loader\"> </div>";
    waitfor(function setQuality(){ 
        quality = q; 
        document.getElementById("input").innerHTML = "";
    });
}

关键知识点回顾 #

• 浏览器的JS线程和UI渲染线程互斥：只要JS在执行同步代码，浏览器就没法更新页面。
• 永远不要用同步循环模拟等待，这是反模式！异步任务（setTimeout、Promise、async/await等）才是正确的等待方式，既能实现延迟逻辑，又不会阻塞页面。

内容的提问来源于stack exchange，提问作者Junge