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

Question

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

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

在页面中切换class的跨度如下：

<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

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

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

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

Answer 2

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

Answer 3

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

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 4

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

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

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);
}

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

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

javascript loop freezes browser and can't see change before loop

javascript

loops

for-loop

freeze