如何打破javascript中的循环？

Question

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  let element = callAllPie;
  for (let i = 0, n = 4; i < n; i++) {
    const pie = document.createElement("div");
    pie.classList.add("pie1");
    callAllPie.appendChild(pie);
    const rightDiv = document.createElement("div");
    rightDiv.classList.add("slice-right1");
    const leftDiv = document.createElement("div");
    leftDiv.classList.add("slice-left1");
    const percentDiv = document.createElement("div");
    percentDiv.classList.add("percent1");
    const numberDiv = document.createElement("div");
    numberDiv.classList.add("number1");
    numberDiv.innerHTML = "%99";
    const nameDiv = document.createElement("div");
    nameDiv.classList.add("name1");
    nameDiv.innerHTML = "HTML";
    pie.appendChild(rightDiv);
    pie.appendChild(leftDiv);
    pie.appendChild(percentDiv);
    percentDiv.appendChild(numberDiv);
    percentDiv.appendChild(nameDiv);
    callAllPie.appendChild(pie);
  }
}

I want to break the loop after the click event runs once, how do I do it? When run the click event, added pie div to my page but when I clicked again, it being created again.

Answer 1

You could simply remove the click listener at the beginning of your showSkills() function so no further clicks trigger an action:

function showSkills() {
    arrow.removeEventListener('click', showSkills);
    let element = callAllPie;
    ....
}

Or as Teemu points out, a much cleaner approach is to set once: true in the options parameter:

arrow.addEventListener("click", showSkills, {once: true});

Answer 2

You can make a boolean isLoopRunning and use it to see if the loop Is already running

const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");
eventList();
let isLoopRunning = false;
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}
function showSkills() {
  let element = callAllPie;
  isLoopRunning = !isLoopRunning;
  for (let i = 0, n = 4; i < n; i++) {
    if (isLoopRunning) {
      // your code here
    } else {
      break;
    }
  }
}

Answer 3

The break statement terminates the current loop.

if condition satisfies requirement just use break keyword inside loop

for(let i=0; i<10; i++){
if(i==6){
console.log(i)
break;
}
console.log("hi")
}

"hi" will not print after 6 times

Answer 4

When using a status variable outside the function you will have the option to reset the status elsewhere in the code and have the loop run once again.

var showSkills = true;

// Runs once upon user click
function showSkills() {
   if (showSkills) {

      for {
          /* Do the loop */
      };

      showSkills = false;
   };
}

// If you need to run it again upon user click.
// E.g. attach it to some 'reset' button.
function reset() {
   showSkills = true;
}