如何在javascript中生成infinate循环

我刚刚开始使用javascript，我希望有一个切换按钮，可以运行一个函数，直到再次按下为止。我有一些切换代码：

const backgroundButton = document.getElementById("backgroundButton"); //getting button from HTML
let clickToggle = 0; //defining a veriable used to store the state of the button


backgroundButton.addEventListener("click", function(){   
    if (clickToggle == 0) {

        console.log('button was off');

        //start loop

        clickToggle = 1;
    }
    else {

        console.log('button was on');
        
        //stop loop
        
        clickToggle = 0;
    }
});

但是，我不知道如何进行无限循环，非常感谢您的帮助

---

（注：我知道无限循环崩溃，这就是我在这里的原因）

您可以使用

setInterval

和

clearInterval

。真正的无限循环如下所示：

while (true) doSomething();

但这不是任何人想要的，因为它会阻塞用户界面。使用

setTimeout

或

setInterval

可以让事件循环继续工作

我假设您想在此演示中重复调用函数

doSomething

：

const backgroundButton=document.getElementById（“backgroundButton”）；
设定时器=0；
const output=document.getElementById（“输出”）；
backgroundButton.addEventListener（“单击”，函数（）{
如果（计时器==0）{
日志（'按钮关闭'）；
//起动回路
定时器=设定间隔（剂量计，50）；
}
否则{
log（'按钮打开'）；
//停止循环
清除间隔（计时器）；
定时器=0；
}
});
函数doSomething（）{
output.textContent=+output.textContent+1；
}

启动/停止

您可以这样做。希望你能在接下来的场景中下定决心

let isEnabled = false;
let interval;

function clickFunction() {

    isEnabled = !isEnabled; // toggle enable flag

    if (isEnabled) {
        console.log('Set Interval', isEnabled)
        interval = setInterval(function () {
            console.log('Do some work.');
        }, 1000);
    } else {
        console.log('Clear Interval', isEnabled)
        clearInterval(interval);
    }
}


<button onclick="clickFunction()">Click me</button>

设isEnabled=false；
让间隔；
函数clickFunction（）{
isEnabled=！isEnabled；//切换启用标志
如果（已启用）{
console.log（'Set Interval'，已启用）
间隔=设置间隔（函数（）{
log（'做一些工作'）；
}, 1000);
}否则{
console.log（'清除间隔'，已启用）
间隔时间；
}
}
点击我

您也可以用于无限循环

consttogglebutton=document.querySelector（“#toggle”）；
让我们开始=虚假；
让动画；
常数滴答=（）=>{
如果（已经开始）{
document.querySelector（'#output'）.textContent+='+'；
};
requestAnimationFrame（勾选）
};
toggleButton.addEventListener（“单击”，函数（）{
如果（！已开始）{
console.log（'Starting'）；
hasbeated=true；
动画=请求动画帧（勾选）；
}否则{
console.log（'Stopping'）；
开始=错误；
取消动画帧（动画）；
anim=null；
}
});
启动/停止
有一个很好的资源：您不需要无限JS循环，因为它会阻止页面上的所有其他执行，包括按钮点击检测。有几个选项
while（true）
，
for（i=0；i>=0；i++）
，
setTimeout/setInterval
…在此循环过程中，您想做什么？在这种情况下，使用setInterval/setTimeout几乎是强制性的，以避免阻止调用
stop
函数的事件循环。