Erstellen Sie divs mit Start/Pause-Taste

Question

Ich versuche, die Schaltfläche zu verwenden, während der Wert auf "Start" gesetzt ist, um progregresive rote Kreise zu erstellen, bis ich die Taste drücke und es auf "Pause" geschaltet wird, wodurch die rote stoppt Kreiskreation.

Das Problem ist, wenn ich die "Start" -Taste den Browser abstürzt.

var actionBtn = document.querySelector(".btn"); 

function changeState(){ 
    if (actionBtn.value == "Start") { 
    actionBtn.value = "Pause"; 
    } 
    else { 
    actionBtn.value = "Start"; 
    } 
} 

function addElem(){ 
    while (actionBtn.value == "Start") { 
    var elemCreate = document.createElement("div"); 
    elemCreate.className = "circle"; 
    document.querySelector(".appWrap").appendChild(elemCreate); 
    } 
} 

actionBtn.addEventListener("click", function(){ 
    changeState(); 
    addElem(); 
}); 

Answer 1

Sie müssen setTimeout oder setInterval und nicht eine while-Schleife verwenden. Die while-Schleife sperrt den Browser und Sie können das Bit, mit dem Sie die Schleife beenden, nicht umkehren. Außerdem läuft die while-Schleife sehr schnell, so dass Sie in kurzer Zeit viele Elemente hinzufügen können. Mit Timern können Sie die Rate steuern.

function addElem(){ 
    var elemCreate = document.createElement("div"); 
    elemCreate.className = "circle"; 
    document.querySelector(".appWrap").appendChild(elemCreate); 
} 

var timer; 
function changeState(){ 
    if (actionBtn.value == "Start") { 
    actionBtn.value = "Pause"; 
    timer = window.setInterval(addElem, 500); 
    } 
    else { 
    actionBtn.value = "Start"; 
    window.clearTimeout(timer); 
    } 
}