javascript循环冻结浏览器并且在循环之前看不到变化

Question

我有一个简单的 javascript 循环，如下所示：

function runCode() {
    $("#sample-span").removeAttr("style");
    for (var i = 0; i < 100000; i++) {
        console.log(new Date());
    }
    $("#sample-span").toggleClass("colorized");
}

页面中的切换类 span 如下：

<span id="sample-span" style="color: orange;">Sample Text</span>
<input type="button" value="click to run" onclick="runCode()" />

<style>
span {
    color: blue;
}
.colorized {
    color: red;
}
</style>

问题是当循环运行时页面冻结并且看不到跨度颜色的变化。

我该如何解决这个问题？

jsfiddle link

更新

亲爱的，console.log(new Date()); 只是一个示例，您假设这里正在运行繁重的 javascript 进程。

Answer 1

在运行繁重的过程之前，您必须在更改颜色后添加一个小延迟：

function runCode() {
  $("#sample-span").toggleClass("colorized");
  setTimeout(runTask,10)
}

function runTask(){
    for (var i = 0; i < 100000; i++) {
    console.log(new Date());
  }
  $("#sample-span").toggleClass("colorized");
}

JSFiddle

Answer 2

您的代码的问题在于 javascript 任务队列在执行 DOM 操作之前会执行您的函数中的所有可用代码。这意味着注册了类切换调用，执行循环，然后连续执行切换，因此您看不到颜色变化。

您需要做的是将函数的第二部分发送到任务队列的末尾，如下所示：

function runCode() {
    $("#sample-span").toggleClass("colorized");
    // allows the first toggle to execute and sends the loop and the second
    // toggle to the end of the task queue
    setTimeout(function() {
        for (var i = 0; i < 5000; i++) {
            console.log(new Date());
        }
        $("#sample-span").toggleClass("colorized");
    }, 0);
}

我已经减少了迭代次数以减少浏览器锁定，您仍然可以看到颜色变化。

Answer 3

你实际上想做什么？如果您希望文本显示为红色，然后在指定时间后切换回来，您真正需要的是 setTimeout。

  $("#sample-span").toggleClass("colorized");

  setTimeout(function() { $("#sample-span").toggleClass("colorized") }, 1000);

Answer 4

这是因为您在单击按钮时切换了两次课程。 如果您想在完成后更改跨度的颜色，请编写：function runCode() { $("#sample-span").toggleClass("colorized"); for (var i = 0; i < 100000; i++) { console.log(new Date()); } }