SetTimeout 函数仍然使 UI 无响应，直到其操作结束答案

【问题标题】：SetTimeout function still makes UI unresponsive until its operation overSetTimeout 函数仍然使 UI 无响应，直到其操作结束
【发布时间】：2012-05-15 19:08:37
【问题描述】：

我已经用 setTimeout 函数包装了长时间运行的逻辑（longLoop），但 UI 仍然没有响应，直到长时间运行执行结束。它不允许单击其他 UI 按钮。请查看我下面的示例，如果您发现任何问题，请告诉我。

function longLoop () {
    var startLogTime, endLogTime;
    startLogTime = new Date().getTime();
    console.log("loop begin");
    for (var i = 0; i <= 500000000; i++) {
        var j = 10;
    }
    endLogTime = new Date().getTime();
    console.log("loop execution takes " + (endLogTime - startLogTime) + " milliseconds");
}

$(document).ready(function () {

    $("#btnButton").bind("click", function () {
        setTimeout(longLoop, 15);

    });

    $("#anotherButton").bind("click", function () {
        console.log("another operation clicked");
    });
});

<input type="button" id="btnButton" value="Start Long Operation" />
<input type ="button" id="anotherButton" value= "Another operation" />

谢谢

【问题讨论】：

JavaScript 是“单线程”的。很确定setTimeout 在运行时不会创建自己的“线程”，它只是在稍后运行。

标签： javascript jquery

【解决方案1】：

即使它是“异步”的，setTimeout 仍然在主事件循环上调度它的调用。由于主事件循环还接收点击、键盘输入以及网页可能发送的每个事件，因此您只是在延迟长时间操作冻结 UI 的时刻。

如果您想与主事件循环并行运行您的操作，您应该查看Web workers，它会产生真正的线程（有一些重要的限制）。

【讨论】：

【解决方案2】：

JavaScript 是单线程的，所以总是只有一种方法在运行。一旦longLoop 启动，就什么也做不了了。您可以使用新的HTML5 web workers 绕过此限制。

【讨论】：

【解决方案3】：

JavaScript is not a mutithreaded language，即使你使用setTimeout，它也在主线程中运行，你只是推迟操作，你应该看看Web-Workers，用于在后台运行cpu密集型任务的新JavaScript API

【讨论】：