如何使用Javascript创建不阻塞页面的定时onClick事件处理程序

问题根因 #

你代码里的页面冻结、无灰化效果问题，核心是greyOut函数中使用了同步阻塞式的do...while循环：
JavaScript运行在浏览器的主线程上，该线程同时负责JS代码执行、UI渲染、用户交互响应三类工作。同步死循环会持续占满主线程，期间浏览器无法更新按钮灰化的UI，也无法响应其他用户操作，所有状态变更会等到循环结束后一次性批量执行，所以看不到过渡效果，页面也会卡住。

解决方案 #

不需要借助多线程API，用浏览器内置的异步定时器setTimeout即可实现需求，该方案不会阻塞主线程，等待期间用户可正常操作页面其他内容。

修正后的JavaScript代码 #

// 初始化木材数值变量
let wood = 0;

function getWood() {
    const woodBtn = document.getElementById("woodBtn");
    // 点击后立刻灰化按钮，可选新增disabled防止重复点击
    woodBtn.style.opacity = "0.5";
    woodBtn.disabled = true;

    // 注册1秒后执行的异步回调，计时期间不阻塞主线程
    setTimeout(() => {
        // 1秒结束后再更新数值、恢复按钮状态
        wood++;
        document.getElementById("woodValue").innerHTML = wood;
        woodBtn.style.opacity = "1.0";
        woodBtn.disabled = false;
        // 保留原有控制台打印逻辑，如果你自定义了writeConsole可替换下方代码
        console.log("Got 1 wood!!");
    }, 1000);
}

实现原理 #

• setTimeout调用后会立刻返回，计时逻辑由浏览器内部的定时器模块独立处理，不会占住JS主线程
• 1秒计时结束后，回调函数会被加入任务队列，等主线程空闲时自动执行
• 等待的1秒内主线程处于空闲状态，可正常响应其他交互、渲染其他UI，不会出现页面冻结

HTML代码优化提示 #

原HTML中木材数值的td标签多了一个多余的闭合尖括号，可修正为：

<td id="woodValue">0</td>

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