为什么 Edge 浏览器不像其他浏览器那样处理 Javascript setTimer()
Why Edge browser does not process Javascript setTimer() like other browsers
我注意到 Edge 浏览器存在问题,但我无法弄清楚问题到底是什么:
我用 javascript 写了一个简单的网页到 运行 一些代码,它利用了 setTimer()
函数。它在 Opera 浏览器中运行良好。在 Edge 浏览器上,此代码不是 运行ning,但我在网上找到的其他类似代码效果很好。
我将代码简化为以下内容。
<HTML>
<BODY>
<p>Test body</p>
<button id="BtnStartCalculation">Start Calculation</button>
<script>
//Test script
BtnStartCalculation= document.getElementById("BtnStartCalculation")
BtnStartCalculation.addEventListener('click',BtnStartCalculationClick,false);
var niter=0;
function BtnStartCalculationClick(event){
//Start the calculation by running iterations
document.write("<p>Start program</p>");
CalculationCycle();
}
function CalculationCycle(){
niter+=1;
document.write("<br>Status niter= "+ niter.toString());
setTimeout(CalculationCycle,200); //Give some time to redraw
}
</script>
</BODY>
</HTML>
单击按钮后,代码应连续打印状态,因为它通过 setTimer()
函数连续调用 CalculationCycle()
。出于某种原因,Edge 浏览器似乎忽略了它。
感谢任何帮助。
通过使用 inspect element ,我发现您的 document.write() 已被覆盖,这使得您的脚本仅 运行 一次
function CalculationCycle(){
niter+=1;
document.write("<br>Status niter= "+ niter.toString());
setTimeout(CalculationCycle(),200); //Give some time to redraw
}
您的 CalculationCycle 将 () 放在它应该工作的后面
document.write("Start program");
document.write("Status niter= "+ niter.toString()); setTimeout(CalculationCycle,200); //Give some time to redraw
我认为问题与文档写入方法(上述代码)有关,使用此方法显示运行状态后,会清除页面原始信息,例如按钮和JavaScript脚本。
作为解决方案,您可以添加一个容器来显示输出,例如 div。
代码如下:
<button id="BtnStartCalculation">Start Calculation</button>
<div id="output">
</div>
<script>
//Test script
BtnStartCalculation = document.getElementById("BtnStartCalculation")
BtnStartCalculation.addEventListener('click', BtnStartCalculationClick, false);
var niter = 0;
function BtnStartCalculationClick(event) {
//Start the calculation by running iterations
document.getElementById("output").innerHTML += "<p>Start program</p>";
CalculationCycle();
}
function CalculationCycle() {
niter += 1;
document.getElementById("output").innerHTML += "<br>Status niter= " + niter.toString();
setTimeout(CalculationCycle, 200); //Give some time to redraw
}
</script>
截图如下:
我注意到 Edge 浏览器存在问题,但我无法弄清楚问题到底是什么:
我用 javascript 写了一个简单的网页到 运行 一些代码,它利用了 setTimer()
函数。它在 Opera 浏览器中运行良好。在 Edge 浏览器上,此代码不是 运行ning,但我在网上找到的其他类似代码效果很好。
我将代码简化为以下内容。
<HTML>
<BODY>
<p>Test body</p>
<button id="BtnStartCalculation">Start Calculation</button>
<script>
//Test script
BtnStartCalculation= document.getElementById("BtnStartCalculation")
BtnStartCalculation.addEventListener('click',BtnStartCalculationClick,false);
var niter=0;
function BtnStartCalculationClick(event){
//Start the calculation by running iterations
document.write("<p>Start program</p>");
CalculationCycle();
}
function CalculationCycle(){
niter+=1;
document.write("<br>Status niter= "+ niter.toString());
setTimeout(CalculationCycle,200); //Give some time to redraw
}
</script>
</BODY>
</HTML>
单击按钮后,代码应连续打印状态,因为它通过 setTimer()
函数连续调用 CalculationCycle()
。出于某种原因,Edge 浏览器似乎忽略了它。
感谢任何帮助。
通过使用 inspect element ,我发现您的 document.write() 已被覆盖,这使得您的脚本仅 运行 一次
function CalculationCycle(){
niter+=1;
document.write("<br>Status niter= "+ niter.toString());
setTimeout(CalculationCycle(),200); //Give some time to redraw
}
您的 CalculationCycle 将 () 放在它应该工作的后面
document.write("Start program");
document.write("Status niter= "+ niter.toString()); setTimeout(CalculationCycle,200); //Give some time to redraw
我认为问题与文档写入方法(上述代码)有关,使用此方法显示运行状态后,会清除页面原始信息,例如按钮和JavaScript脚本。
作为解决方案,您可以添加一个容器来显示输出,例如 div。
代码如下:
<button id="BtnStartCalculation">Start Calculation</button>
<div id="output">
</div>
<script>
//Test script
BtnStartCalculation = document.getElementById("BtnStartCalculation")
BtnStartCalculation.addEventListener('click', BtnStartCalculationClick, false);
var niter = 0;
function BtnStartCalculationClick(event) {
//Start the calculation by running iterations
document.getElementById("output").innerHTML += "<p>Start program</p>";
CalculationCycle();
}
function CalculationCycle() {
niter += 1;
document.getElementById("output").innerHTML += "<br>Status niter= " + niter.toString();
setTimeout(CalculationCycle, 200); //Give some time to redraw
}
</script>
截图如下: