使用Promise处理用户输入异步

function waitForButtonClick(buttonElement) {
  return new Promise((resolve, reject) => {
    if (!buttonElement) {
      return reject(new Error('按钮元素不存在！'));
    }

    const handleClick = (event) => {
      // 假设我们只关心第一次点击
      buttonElement.removeEventListener('click', handleClick);
      resolve(event); // 将点击事件对象传递出去
    };

    buttonElement.addEventListener('click', handleClick);

    // 也可以考虑添加一个超时机制，防止用户一直不点击
    // setTimeout(() => {
    //   buttonElement.removeEventListener('click', handleClick);
    //   reject(new Error('用户未在规定时间内点击按钮'));
    // }, 5000);
  });
}

// 使用示例
const myButton = document.getElementById('myActionBtn');
waitForButtonClick(myButton)
  .then(event => {
    console.log('按钮被点击了！事件对象:', event);
    // 接下来可以执行一些操作，比如提交表单
    // submitData(event.target.dataset.value);
  })
  .catch(error => {
    console.error('等待按钮点击出错或超时:', error.message);
  });

button.addEventListener('click', function() {
  showConfirmDialog(function(confirmed) {
    if (confirmed) {
      sendRequest(data, function(response) {
        if (response.success) {
          updateUI(response.data, function() {
            console.log('全部搞定！');
          });
        } else {
          handleError(response.message);
        }
      });
    } else {
      console.log('用户取消了。');
    }
  });
});

/**
 * 封装一个等待DOM元素特定事件的Promise
 * @param {HTMLElement} element 要监听的DOM元素
 * @param {string} eventType 要监听的事件类型 (如 'click', 'input', 'change')
 * @param {number} [timeout=0] 超时时间 (毫秒)。0表示永不超时。
 * @returns {Promise<Event>} 一个Promise，在事件触发时resolve事件对象，超时或元素不存在时reject
 */
function waitForEvent(element, eventType, timeout = 0) {
  return new Promise((resolve, reject) => {
    if (!element || typeof element.addEventListener !== 'function') {
      return reject(new Error(`无效的元素或元素不支持事件监听: ${element}`));
    }

    let timerId;
    const handler = (event) => {
      // 确保事件只触发一次，然后移除监听器
      element.removeEventListener(eventType, handler);
      if (timerId) clearTimeout(timerId); // 清除可能的超时定时器
      resolve(event);
    };

    element.addEventListener(eventType, handler);

    if (timeout > 0) {
      timerId = setTimeout(() => {
        element.removeEventListener(eventType, handler);
        reject(new Error(`事件 [${eventType}] 在 ${timeout}ms 内未触发。`));
      }, timeout);
    }
  });
}

// 使用示例：等待用户在输入框中按下回车
const inputField = document.getElementById('myInputField');
waitForEvent(inputField, 'keydown', 5000)
  .then(event => {
    if (event.key === 'Enter') {
      console.log('用户按下了回车，输入内容:', inputField.value);
      // doSomethingWithInput(inputField.value);
    } else {
      // 如果不是回车，可能需要重新等待或者做其他处理
      console.log('用户按下了其他键:', event.key);
      // 可以在这里reject或者重新调用waitForEvent
      return Promise.reject(new Error('未按下回车'));
    }
  })
  .catch(error => {
    console.error('输入事件处理失败:', error.message);
  });

// 另一个例子：等待用户在下拉菜单中选择一个值
const selectBox = document.getElementById('mySelect');
waitForEvent(selectBox, 'change')
  .then(event => {
    console.log('用户选择了:', event.target.value);
  })
  .catch(error => {
    console.error('选择操作出错:', error.message);
  });

async function conductUserWizard() {
  try {
    console.log('欢迎来到第一步：点击开始按钮');
    const startButton = document.getElementById('startButton');
    await waitForEvent(startButton, 'click'); // 等待用户点击开始

    console.log('进入第二步：请输入您的姓名');
    const nameInput = document.getElementById('nameInput');
    const nameEvent = await waitForEvent(nameInput, 'change'); // 等待用户输入并失去焦点或回车
    const userName = nameEvent.target.value;
    if (!userName) throw new Error('姓名不能为空！');
    console.log(`您的姓名是: ${userName}`);

    console.log('进入第三步：请选择您的偏好');
    const preferenceSelect = document.getElementById('preferenceSelect');
    const preferenceEvent = await waitForEvent(preferenceSelect, 'change');
    const userPreference = preferenceEvent.target.value;
    console.log(`您的偏好是: ${userPreference}`);

    console.log('所有步骤完成，提交数据...');
    // 这里可以发起一个API请求，假设也是Promise
    // await submitUserData({ name: userName, preference: userPreference });
    console.log('数据提交成功！');

  } catch (error) {
    console.error('用户向导过程中出现错误:', error.message);
    // 可以在这里回滚UI，显示错误消息等
  }
}

// 启动向导
// conductUserWizard();