javascript循环冻结浏览器,在循环之前无法看到更改

我有一个简单的Javascript循环,如下所示:

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

在页面中切换跨度类如下:

Sample Text

问题是当循环运行时页面冻结并且无法看到跨度颜色发生变化.

我怎么解决这个问题？

jsfiddle链接

UPDATE

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

在运行繁重的流程之前,您必须在更改颜色后添加一小段延迟:

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