为什么 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>

截图如下: