javascript函数停止浏览器'；s标签

我在处理Javascript

函数时遇到问题
下面的代码中有一个简单的示例
当我点击代码中的按钮时，Javascript
函数开始处理
该函数必须在处理过程中更改进度条的值，并且当您尝试键入页面停止并在几秒钟后浏览器发出消息时，文本区域将显示

我打算确保函数显示进度条的值，并且我希望在加载函数时执行一些任务


函数f（）{
var i；
对于（i=0；i<100000；i++）{
document.getElementById（“p”）.innerHTML+=i；
document.getElementById（“r”）.value+=1；
}
}

点击这里

问题在于Javascript是单线程的。浏览器完全专注于计算，没有时间重新绘制。要解决此问题，我们需要为浏览器提供一些时间来重新组合：


函数f（）{
var i=0；
var intervalID=setInterval（函数（）{
document.getElementById（“p”）.innerHTML+=i；
document.getElementById（“r”）.value+=1；
如果（++i==100000）clearInterval（intervalID）；
}, 50);
}

点击这里

Small note：该函数将“i”添加到P元素，而不是将其中的数字更改为“i”，这使得运行速度大大降低。使用
document.getElementById（“p”）.innerHTML=i
相反。@Lemondoge true，但主要问题是Javascript是单线程的，无法使用其他线程运行它（WebWorkers除外，但由于UI在所有步骤中都需要更新，因此这似乎不是WebWorkers的问题）。