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

Question

我需要无限循环（或其他替代方法）来增加我的变量，当这个变量有一定的值（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

也许可以通过 promises、await 或类似的东西来实现，但我不能。如果有人帮助我，我很感激，谢谢！

Answer 1

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>

Answer 2

我没有亲自使用过 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>

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

stop executing loop on certain condition and wait for click, then continue

javascript

jquery

infinite-loop

async-await