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 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链接

UPDATE

亲爱的,console.log(new Date());只是一个样本,你假设这里运行繁重的javascript procces.

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