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

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

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

问题

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

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

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

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

英文:

I am writing a function of a game:

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

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);
  9. for (var i = 0; i < level; i++) {
  10. var color;
  11. // 等待点击事件
  12. const event = await waitForClick($(".btn"));
  13. // 处理结果
  14. ButtonClickResponse(event.target.id);
  15. color = event.target.id;
  16. if (colorsOrder[i] != color) {
  17. GameOver();
  18. return;
  19. }
  20. level++;
  21. }
  22. }
  23. }
  24. function waitForClick(element) {
  25. // 创建新的 Promise
  26. return new Promise((resolve) => {
  27. const handler = function (event) {
  28. // 当按钮被点击时移除监听器
  29. element.off("click", handler);
  30. // 并解决 Promise
  31. resolve(event);
  32. };
  33. // 监听点击事件
  34. element.on("click", handler);
  35. });
  36. }
英文:

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);
  9. for (var i = 0; i &lt; level; i++) {
  10. var color;
  11. // await for the click event
  12. const event = await waitForClick($(&quot;.btn&quot;));
  13. // do stuff with the result
  14. ButtonClickResponse(event.target.id);
  15. color = event.target.id;
  16. if (colorsOrder[i] != color) {
  17. GameOver();
  18. return;
  19. }
  20. level++;
  21. }
  22. }
  23. }
  24. function waitForClick(element) {
  25. // create new promise
  26. return new Promise((resolve) =&gt; {
  27. const handler = function (event) {
  28. // when button is clicked remove listener
  29. element.off(&quot;click&quot;, handler);
  30. // and resolve the promise
  31. resolve(event);
  32. };
  33. // listen for click
  34. element.on(&quot;click&quot;, handler);
  35. });
  36. }

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

发表评论

匿名网友

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

确定