JS如何将textarea值拆分为数组后循环执行函数且每轮间隔5秒

现有代码问题梳理 #

• textarea的value是属性不是方法，不需要加括号调用，正确写法为document.querySelector('textarea').value
• 定时器API拼写错误：正确写法是setTimeout，不是setTimeOut（首字母O不需要大写）
• 循环批量创建定时器的逻辑不符合需求：for循环会瞬间执行完成，所有定时器会在同一时间触发，无法实现「处理完一个元素等待5秒再处理下一个」的要求
• 缺少当前行内容的处理逻辑

推荐实现（async/await写法，逻辑直观易理解） #

// 延迟工具函数，传入等待毫秒数
function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// 单行内容处理函数，可根据自己的需求修改内部逻辑
function handleCurrentLine(lineText) {
  // 示例：打印当前处理的行内容，替换为你自己的业务逻辑即可
  console.log('当前处理内容：', lineText);
}

// 主处理函数
async function processTextareaLines() {
  // 1. 获取textarea内容并按行拆分，filter用来过滤空行，不需要可以删除
  const lineArray = document.querySelector('textarea').value.split('\n').filter(line => line.trim());

  // 2. 遍历每行，处理完成后等待5秒再进入下一轮
  for (const line of lineArray) {
    handleCurrentLine(line);
    // 等待5秒
    await delay(5000);
  }

  console.log('全部内容处理完成');
}

// 触发执行，建议绑定到按钮点击事件触发，比如：
// document.querySelector('#startBtn').addEventListener('click', processTextareaLines)
processTextareaLines();

配套页面使用示例：

<textarea id="inputArea" rows="10" cols="50" placeholder="输入内容，每行一条"></textarea>
<button id="startBtn">开始逐行处理</button>

兼容旧环境的递归实现（不需要async/await支持） #

// 单行内容处理函数，自行修改逻辑
function handleCurrentLine(lineText) {
  console.log('当前处理内容：', lineText);
}

// 递归逐行处理
function recursiveProcess(lineArray, currentIndex = 0) {
  // 所有行处理完成直接结束
  if (currentIndex >= lineArray.length) {
    console.log('全部内容处理完成');
    return;
  }
  // 处理当前行
  handleCurrentLine(lineArray[currentIndex]);
  // 5秒后处理下一行
  setTimeout(() => {
    recursiveProcess(lineArray, currentIndex + 1);
  }, 5000);
}

// 主逻辑
function processTextareaLines() {
  const lineArray = document.querySelector('textarea').value.split('\n').filter(line => line.trim());
  recursiveProcess(lineArray);
}

// 绑定触发事件
document.querySelector('#startBtn').addEventListener('click', processTextareaLines);

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