如何使循环不继续直到事件发生？

huangapple
go评论114阅读模式
英文:

How to make loop not to continue until an event happens?

问题

我正在编写一个游戏的函数：

  1. function Game(){
  2.     while(true){
  4.         ***
  6.         for(var i = 0; i < level; i++){
  7.             var color;
  8.             $(".btn").on("click", function(event) {
  9.                 ButtonClickResponse(this.id);
  10.                 color = this.id;
  11.             });
  12.             if(colorsOrder[i] != color){
  13.                 GameOver();
  14.                 return;
  15.             }
  16.         }
  18.         ***
  20.     }
  21.     
  22. }

在函数循环中的“if语句”在循环开始时立即运行并多次增加“i”，而不等待上面的事件完成。

我在Google和StackOverflow上搜索了使用“async await”和“promise”来解决问题，但并没有真正理解它是如何工作的，因此无法在我的代码中实现它。

英文:

I am writing a function of a game:

  1. function Game(){
  2.     while(true){
  4.         ***
  6.         for(var i = 0; i < level; i++){
  7.             var color;
  8.             $(".btn").on("click", function(event) {
  9.                 ButtonClickResponse(this.id);
  10.                 color = this.id;
  11.             });
  12.             if(colorsOrder[i] != color){
  13.                 GameOver();
  14.                 return;
  15.             }
  16.         }
  18.         ***
  20.     }
  21.     
  22. }

the "if statement" in the loop of function runs and increments "i" immediately many times when loop is started and doesnt wait for an above event to finish.

I searched for solving with "async await" and "promise" in google and stackoverflow, but didn't really understand how it worked so couldn't implemet it in my code.

答案1

得分: 0

这应该可以工作，尽管我没有测试过它，而且你的做法不是 JavaScript 的方式。

  1. async function Game() {
  2.   while (true) {
  3.     var level = 1;
  4.     $("#level-title").text("Level " + level);
  5.     var colorsOrder = [];
  6.     var randColor = GenerateRandomSquareColor();
  7.     colorsOrder.push(randColor);
  8.     ButtonClickResponse(randColor);
  10.     for (var i = 0; i < level; i++) {
  11.       var color;
  13.       // 等待点击事件
  14.       const event = await waitForClick($(".btn"));
  15.       // 处理结果
  16.       ButtonClickResponse(event.target.id);
  17.       color = event.target.id;
  19.       if (colorsOrder[i] != color) {
  20.         GameOver();
  21.         return;
  22.       }
  24.       level++;
  25.     }
  26.   }
  27. }
  29. function waitForClick(element) {
  30.   // 创建新的 Promise
  31.   return new Promise((resolve) => {
  32.     const handler = function (event) {
  33.       // 当按钮被点击时移除监听器
  34.       element.off("click", handler);
  35.       // 并解决 Promise
  36.       resolve(event);
  37.     };
  38.     // 监听点击事件
  39.     element.on("click", handler);
  40.   });
  41. }
英文:

This should work, although I didn't test it and you do things not in javascript way

  1. async function Game() {
  2.   while (true) {
  3.     var level = 1;
  4.     $(&quot;#level-title&quot;).text(&quot;Level &quot; + level);
  5.     var colorsOrder = [];
  6.     var randColor = GenerateRandomSquareColor();
  7.     colorsOrder.push(randColor);
  8.     ButtonClickResponse(randColor);
  10.     for (var i = 0; i &lt; level; i++) {
  11.       var color;
  13.       // await for the click event
  14.       const event = await waitForClick($(&quot;.btn&quot;));
  15.       // do stuff with the result
  16.       ButtonClickResponse(event.target.id);
  17.       color = event.target.id;
  19.       if (colorsOrder[i] != color) {
  20.         GameOver();
  21.         return;
  22.       }
  24.       level++;
  25.     }
  26.   }
  27. }
  29. function waitForClick(element) {
  30.   // create new promise
  31.   return new Promise((resolve) =&gt; {
  32.     const handler = function (event) {
  33.       // when button is clicked remove listener
  34.       element.off(&quot;click&quot;, handler);
  35.       // and resolve the promise
  36.       resolve(event);
  37.     };
  38.     // listen for click
  39.     element.on(&quot;click&quot;, handler);
  40.   });
  41. }

huangapple
  • 本文由 发表于 2023年1月8日 22:56:52
  • 转载请务必保留本文链接：https://go.coder-hub.com/75048761.html
  • async-await
  • events
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定