Settimeout 不明白为什么这个JavaScript代码赢了'；跑不动

我是JavaScript新手，已经编写了这段代码。它以前有用，但现在不行了，我不明白为什么。按钮上的文字甚至没有变为“暂停”。当我在浏览器中尝试它时，过了一段时间后，它会说“由于长时间运行的脚本，localhost没有响应。”

单击开始训练
开始
var时间=0；
var运行=0；
var everySecond=真；
var max=20；
var numberOfTimes=1；
函数startPause（）{
如果（正在运行==0）{
运行=1；
document.getElementById（“tabataButton”）.innerHTML=“暂停”；
增量（）；
}
否则{
运行=0；
document.getElementById（“tabataButton”）.innerHTML=“开始”；
}
}
函数重置（）{
时间=1；
document.getElementById（“秒表”）.innerHTML=“0”；
如果（每秒钟==真）
{
每秒钟=假；
最大值=20；
document.getElementById（“tabataBox”）.style.backgroundColor=“绿色”；
document.getElementById（'el-'+numberOfTimes）.style.backgroundColor=“绿色”；
次数++；
document.getElementById（“PauseGetText”）.innerHTML=“REST”；
}
否则{
每秒钟=真；
最大值=10；
document.getElementById（“tabataBox”）.style.backgroundColor=“红色”；
document.getElementById（“PauseGetText”）.innerHTML=“GO！”；
}
}
函数增量（）{
如果（运行==1）{
setTimeout（函数（）{
时间++；
如果（时间>最大值）{
重置（）；
}
document.getElementById（“秒表”）.innerHTML=时间；
增量（）；
}, 1000)
}
}

对我来说很好嗨！奇怪的我尝试了你的链接，它工作。。。但是，当我从VisualStudio构建它时，或者当我以前在jsfiddle.net中尝试它时，它不起作用。也许是我的浏览器。。。

                        <div>
                            <div id="tabataBox">
                                <p id="PauseGoText"></p>
                                <p id="stopwatch">CLICK TO START WORKOUT</p>
                                <button id="tabataButton" onclick="startPause()">START</button>
                            </div>
                                <span class="circle" id="el-1"></span>
                                <span class="circle" id="el-2"></span>
                                <span class="circle" id="el-2"></span>
                                <span class="circle" id="el-3"></span>
                                <span class="circle" id="el-4"></span>
                                <span class="circle" id="el-5"></span>
                                <span class="circle" id="el-6"></span>
                                <span class="circle" id="el-7"></span>
                                <span class="circle" id="el-8"></span>
                        </div>
                    </div>



var time = 0;
var running = 0;
var everySecond = true;
var max = 20;
var numberOfTimes = 1;

function startPause() {
    if (running == 0) {
        running = 1;
        document.getElementById("tabataButton").innerHTML = "PAUSE";
        increment();
    }
    else {
        running = 0;
        document.getElementById("tabataButton").innerHTML = "START";
    }
}

function reset() {
    time = 1;
    document.getElementById("stopwatch").innerHTML = "0";
    if (everySecond == true)
    {
        everySecond = false;
        max = 20;
        document.getElementById("tabataBox").style.backgroundColor = "green";
        document.getElementById('el-'+numberOfTimes).style.backgroundColor = "green";
        numberOfTimes++;
        document.getElementById("PauseGoText").innerHTML = "REST";
    }

    else {
        everySecond = true;
        max = 10;
        document.getElementById("tabataBox").style.backgroundColor = "red";
        document.getElementById("PauseGoText").innerHTML = "GO!";
    }
}

function increment() {
    if (running == 1) {

        setTimeout(function () {
            time++;

            if (time > max) {
                    reset();
                }

            document.getElementById("stopwatch").innerHTML = time;
            increment();

        }, 1000)
    }
}