在特定条件下停止执行循环并等待点击，然后继续

问题描述

我需要无限循环（或其他替代方法）来增加我的变量，并且当此变量具有特定值（100或更大）时，将停止执行此循环并等待用户单击。之后，循环继续。

类似这样的东西：

var speed = 0;

for(i=0; i>=0; i++){
    speed += 13;
    if(speed >= 100){
        // wait for this click
        $(“.el”).click(()=> {
            // some code
            speed = 0;
        });
    }
    //then continue loop with - speed = 0
}

写在javascript上

也许可以通过承诺，等待或类似的方式实现，但我做不到。我感谢有人帮助我，谢谢！

解决方法

setTimeout似乎是适合该职位的人。
要关闭单击，请使用jQuery的.off()方法。另外，.one()方法仅附加一次回调

const $btn = $("#btn");
const $log = $("#log");
let speed = 0;
let tO = null;

function clickHandle( evt ) {
  console.log("CLICKED");   // Do something here
  // ....
  $btn.off("click",clickHandle); // Prevent further clicks
  loop(); // restart the loop!
}

function loop() {
  if (speed >= 100) {
    clearTimeout(tO);
    $btn.one("click",clickHandle); // Allow one click only
    speed = 0; // Reset speed to 0
    return; // Exit here,we're at >=100
  }
  
  speed += 13;
  $log.text(speed);
  tO = setTimeout(loop,150); // Do +13 every 150ms
}

// init:
loop();

<button id="btn" type="button">Restart</button>
<div id="log"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

,

我还没有亲自使用过JQuery，但这是递归完成的代码。

let speed = 0;

document.querySelector(".el").addEventListener("click",() => {
  // some code
  speed = 0;

  // this restarts the loop
  loop()
},false)


function loop() {
  speed += 13;
  if (speed < 100) {
    loop();
  }
}
// to start the loop
loop();

<button class="el">Click ME</button>