javascript 尝试允许用户通过按下按钮使用JS和P5逐步执行算法的for循环

lsmepo6l 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(119)

我正在尝试弄清楚如何让用户使用P5和JS上的按钮单击来逐步执行算法。我的另一个代码接受一些文本，并显示一些在下面提到的算法中使用的自定义字符单元格。我希望用户单击Next按钮，让它逐步执行，并在执行每一步之前等待用户输入。
下面是一个代码片段

async function straightforward(patternCells, textCells){

  const timeout = async ms => new Promise(res => setTimeout(res, ms));  
  let nextStep = false;

  forwardButton = createButton("->",0,0);
  forwardButton.position(confirmButton.x + backButton.width, 400);
  forwardButton.mousePressed(() => next = true)

  //Do some set up and display the button
  for (var i = 0; i < textLen; i++) {
    var j = 0;
    await waitButtonNext(); 
    //algorithm runs here
  }
  async function waitButtonNext() {
    while (nextStep === false) await timeout(1); // pause script but avoid browser to freeze ;)
    nextStep = false; // reset var
  }

chrome上的控制台也没有错误。

JavaScript

来源：https://stackoverflow.com/questions/71927805/trying-to-allow-the-user-to-step-through-a-for-loop-for-an-algorithm-using-js-an

2条答案

按热度按时间

epggiuax1#

有很多方法可以做到这一点。一种方法是在每一步创建一个函数数组，每当按下按钮时一次执行一个函数。
例如：

const steps = [
  () => {
    text("step 1; click to go to step 2", 10, 50);
  },
  () => {
    text("step 2; click to go to step 3", 10, 50);
  },
  () => {
    text("step 3; click to go to end", 10, 50);
  },
];

const defaultAction = () => text("that's it", 10, 50);

function setup() {
  createCanvas(300, 100);
  textSize(20);
  noLoop();
}

function draw() {
  text("click to start", 10, 50);
}

function mousePressed() {
  clear();
  (steps.shift() || defaultAction)();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

这个例子有点做作，因为每一步都没有动画。一个更真实的例子应该包含动画。
一种继续避免draw函数中if/else令人讨厌的链的方法（尽管这在紧要关头确实有效）是在每一步替换draw，并且可选地根据需要操作noLoop()和loop()以开始和停止动画。
一个二个一个一个
更进一步说，假设你想重复一个步骤。这在这个设计中是非常容易的。不是永久地从动作数组中移动每个函数，而是保留一个索引来引用应该采取的动作。响应按钮点击，改变索引并调用相应的函数。这是在p5.js中实现"场景"的一种方法。在某些情况下，使用每个状态都有明确命名的键的对象可能是有意义的，例如{titleScreen: () => ..., endingScreen: () => {...}}等。请参见使用p5.js从一个场景过渡到下一个场景以了解对此的完整处理。
您还可以"旋转"行为数组以创建循环重复，例如：

function mousePressed() {
  const action = steps.shift();
  steps.push(action);
  action();
}

如果愿意，可以将所有这些场景或步骤函数存储在单独的外部文件中，从而使代码易于维护。

赞(0）回复(0）举报 2022-12-25

yqhsw0fo2#

实现这一点的一种方法是，将希望执行一次的脚本放入一个单独的函数中，在按下按钮时调用该函数，同时在单独的变量中跟踪已完成的迭代

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 尝试允许用户通过按下按钮使用JS和P5逐步执行算法的for循环

2条答案

相关问题

热门标签

最新问答