JS待办列表代码存在退出需多次输q、list命令打印延迟问题求解决

问题根因 #

• 第一个问题（需多次输入q/quit才退出）：触发list命令时，代码中存在多余的prompt("List has been printed! ")调用，该弹窗的输入不会赋值给循环判断用的input变量，若在此弹窗输入q/quit不会触发退出逻辑，必须等该弹窗关闭后，在下一个赋值给input的弹窗中再次输入q/quit才会生效，需要输入的次数取决于此前调用过多少次list命令。
• 第二个问题（list内容退出后才打印）：浏览器的prompt是同步阻塞API，会阻塞主线程的所有UI更新（包括控制台日志输出），循环内所有console.log的内容会被临时缓存，直到整个while循环结束（程序退出）后才会批量打印到控制台。

修复方案 #

最简修复（保留prompt交互，同时解决两个问题） #

删除多余的prompt调用，同时将列表内容拼接后用alert弹出，用户输入list后可即时查看内容，修复后代码如下：

let input = prompt("What would you like to do?");
const toDo = ['Visit Resham', 'Check progress of Barth certificate'];

while (input !== 'quit' && input !== 'q') {
  if (input === 'list') {
    // 拼接列表内容用alert弹出，可即时查看
    let listContent = '******************\n';
    for (let i = 0; i < toDo.length; i++) {
      listContent += `${i} : ${toDo[i]}\n`;
    }
    listContent += '*****************';
    alert(listContent);
    // 同时保留控制台输出，退出后也能查看历史
    console.log(listContent);
  }
  input = prompt("What would you like to do?")
}
console.log("OK! You have quitted the app ")

如果要求内容必须即时输出到控制台，建议放弃阻塞式的prompt交互，改用页面输入框实现非阻塞交互，示例实现如下：

<!-- 页面HTML部分 -->
<input type="text" id="cmdInput" placeholder="输入命令：list/q/quit">
<button id="submitBtn">执行</button>

// JS逻辑部分
const toDo = ['Visit Resham', 'Check progress of Barth certificate'];
const input = document.getElementById('cmdInput');
const btn = document.getElementById('submitBtn');

btn.addEventListener('click', () => {
  const cmd = input.value.trim();
  input.value = '';
  if(cmd === 'q' || cmd === 'quit') {
    console.log("OK! You have quitted the app ");
    input.disabled = true;
    btn.disabled = true;
    return;
  }
  if(cmd === 'list') {
    console.log('******************')
    for (let i = 0; i < toDo.length; i++) {
      console.log(`${i} : ${toDo[i]}`);
    }
    console.log('*****************')
  }
})

内容的提问来源于stack exchange，提问作者Efty Shan Abid