如何实现点击按钮前暂停JavaScript程序后续代码执行？

你的核心问题在于两点：一是按钮点击是异步事件，当前代码会直接返回空数组；二是p5.js默认会自动执行preload/setup/draw，不会等待用户输入完成。下面是具体的实现方案：

1. 重构输入处理逻辑：用回调获取用户输入结果 #

把原来的createArray函数改成接受回调的形式，确保只有用户点击"Enter terms"后才处理输入并执行后续代码：

function createArray(howMany, onComplete) {
  // 创建textarea和按钮
  const pasteInput = document.createElement("TEXTAREA");
  pasteInput.rows = howMany;
  document.body.appendChild(pasteInput);

  const doneBtn = document.createElement("button");
  doneBtn.innerHTML = 'Enter terms';
  document.body.appendChild(doneBtn);

  // 按钮点击事件：处理输入并触发回调
  doneBtn.onclick = function() {
    // 处理输入：去除空格，按行分割，过滤空行，每行按'-'拆分
    const inputContent = pasteInput.value.replace(/ /g, '');
    const termLines = inputContent.split('\n').filter(line => line.trim() !== '');
    const termArray = termLines.map(line => line.split('-'));

    // 隐藏输入元素
    pasteInput.style.display = 'none';
    doneBtn.style.display = 'none';

    // 传递结果给回调函数
    onComplete(termArray);
  };
}

2. 改用p5.js实例模式，手动控制程序启动 #

p5.js默认的全局模式会自动运行生命周期函数，我们需要改成实例模式，让程序在用户输入完成后才启动：

步骤1：封装p5程序为初始化函数 #

把所有p5相关的代码（preload/setup/draw等）放到一个函数里，接受termArray作为参数：

function initP5App(termArray) {
  // 创建p5实例
  new p5(function(p) {
    let BG;
    let Helvetica;
    let speakericon;
    let translateEditBtn;
    let list = '';
    let temp1, temp2, temp3;
    let performanceDisplay = '';

    // 初始化术语列表字符串
    for (let i = 0; i < termArray.length; i++) {
      list += `${i+1}. [${termArray[i][0]}]  -  [${termArray[i][1]}]\n`;
    }

    p.preload = function() {
      Helvetica = p.loadFont('Helvetica-Bold.ttf');
      BG = p.loadImage('images/background.png');
    };

    p.setup = function() {
      alert(`Below are the terms you have entered: \n${list}If any of the above are incorrect, use the edit buttons on the next screen to adjust terms or translations.`);
      speakericon = p.loadImage('images/speaker.png');
      p.createCanvas(p.windowWidth, p.windowHeight);

      // 创建编辑按钮
      translateEditBtn = document.createElement("button");
      translateEditBtn.innerHTML = "Edit a translation";
      translateEditBtn.style.position = 'absolute';
      translateEditBtn.style.left = '50px';
      translateEditBtn.style.top = '130px';
      translateEditBtn.onclick = function() {
        this.blur();
        let replaceChoice;
        do {
          replaceChoice = prompt(`Which translation do you want to edit? (1-${termArray.length}) \n${list} \nOr enter any letter to leave this screen.`);
          // 处理非数字输入，直接退出循环
          if (isNaN(replaceChoice)) break;
          replaceChoice = parseInt(replaceChoice);
        } while (replaceChoice < 1 || replaceChoice > termArray.length);

        if (!isNaN(replaceChoice)) {
          termArray[replaceChoice-1][1] = prompt(`What is the new translation for the term ${termArray[replaceChoice-1][0]}?`);
          // 更新术语列表
          list = '';
          for (let i = 0; i < termArray.length; i++) {
            list += `${i+1}. [${termArray[i][0]}]  -  [${termArray[i][1]}]\n`;
          }
          alert(`The term list currently looks as follows: \n${list}`);
        }
      };
      document.body.appendChild(translateEditBtn);

      // ... 原setup函数中的其他代码
    };

    p.draw = function() {
      p.image(BG, 0, 0, p.width, p.height);
      // ... 原draw函数中的其他代码
    };

    // 可选：处理窗口大小变化
    p.windowResized = function() {
      p.resizeCanvas(p.windowWidth, p.windowHeight);
    };
  });
}

步骤2：在用户选择逻辑中触发启动 #

修改你的用户选择分支，在输入完成后调用initP5App启动程序：

// 假设trimmedResponse是用户的选择结果
if (trimmedResponse == 'manual') { 
  // 处理manual模式的逻辑，生成termArray
  // ... 你的原有代码
  // 生成termArray后启动p5程序
  initP5App(termArray);
} else { // 选择paste模式
  createArray(numOfTerms, function(termArray) {
    // 用户输入完成后，启动p5程序
    initP5App(termArray);
  });
}

关键说明 #

• 异步回调：按钮点击是异步操作，必须用回调/Promise确保输入完成后再执行后续代码，避免提前拿到空数组。
• p5实例模式：通过手动创建p5实例，完全控制程序启动时机，解决默认自动执行生命周期函数的问题。
• 输入逻辑修正：原代码中处理输入的循环存在逻辑错误，现在改为按行分割并正确拆分术语和翻译。

内容的提问来源于stack exchange，提问作者Nessle