JavaScript等待用户输入的阻塞执行方案分享

最近在负责百度TDA平台的aiCalling二期,在给AI智能助手添加澄清功能的时候出现了一个需求:需要等待用户在输入框中输入内容并确认后,才能继续执行后续代码。简单来说,就是需要在同步代码流程中实现"阻塞等待"的效果。

澄清功能图如下:

需求伪代码如下:

javascript 复制代码
while(条件1) {
  while(条件2) {
    // 一些代码
    等待用户输入  // 需要在这里阻塞,直到用户输入后才继续
    // 后续代码
  }
}

当想到阻塞同步代码这个词条的时候我第一个想的就是async await

async实际上就是Promsie的语法糖,当 JavaScript 引擎遇到 async 函数时,会将其转换为一个返回 Promise 的函数。而在函数内部,每个 await 表达式都会暂停函数的执行,直到 Promise 解决,然后以 Promise 的解决值恢复执行(await只暂停async函数内部的执行,不会阻塞主线程,JavaScript 的事件循环会继续处理其他任务)。

我这里直接使用new Promise通过await来阻塞执行,等待resolve()后结束阻塞:

javascript 复制代码
async function() {
  // 前置代码...
  
  await new Promise(resolve => {
    const checkTextEmpty = () => {
      if (this.questionText !== '') { // 用户已输入并确认
        // 一些逻辑代码...
        
        resolve(); // 解除阻塞
      } else {
        setTimeout(checkTextEmpty, 200); // 200ms后再次检查
      }
    };
    checkTextEmpty();
  });
  
  // 后续代码...
}

此时使用方案为:setTimeout轮询+Promise阻塞。


本文就此结束了吗?当然没有,肯定有同学会提出疑问:轮询一般是下下策,比如使用setTimeout会来带性能损耗等诸多问题,有没有更好的解决方案?

有的兄弟有的。

在和mentor进行code review后,mentor提出一个优化方案:通过现有事件总线的发布订阅来代替setTimeout轮询。

于是优化版的代码如下:

javascript 复制代码
// 处理用户输入的函数
setQuestionText = value => {
  this.questionText = value;
  if (value !== '') {
    window.globalEvent.emitEvent('questionTextChanged', value);
  }
};

// 主逻辑
async function() {
  // 前置代码...
 
  await new Promise(resolve => {
    const eventHandler = event => {
      //  一些逻辑代码...
      
      event.remove(); // 移除事件监听,避免内存泄漏
      resolve(); // 解除阻塞
    };
    //订阅用户输入事件
    window.globalEvent.listenEvent('questionTextChanged', eventHandler);
  });
  
  // 后续代码...
}

此时的方案为:发布订阅+Promise阻塞,这个方案是目前最终解决方案,避免了轮询方案递归setTimeout的复杂性和潜在内存泄漏风险。

本文重在方案分享与探讨,欢迎来分享更优或平替解决方案。

相关推荐
rzl025 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang6 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景8 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼9 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿11 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再13 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55517 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录22 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000023 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl24 分钟前
深度剖析Kafka读写机制
前端