如何在按钮点击后延迟执行并组合多个JavaScript函数？

问题描述 #

点击按钮后，需要先完成headline区域的打字机效果，延迟后再执行random区域的打字机效果（结合随机内容生成与打字机逻辑），之前尝试的setTimeout写法未达到预期效果。

解决方案 #

核心思路是让打字机函数支持完成回调，以此精准控制两个打字效果的执行顺序，同时避免全局变量冲突。

1. 重构通用打字机函数

将原有的打字机逻辑改造成可复用的函数，支持指定目标元素、文本内容、打字速度，以及完成后的回调函数：

// 通用打字机函数
function typeWriter(elementId, text, speed, callback) {
  let i = 0;
  const element = document.getElementById(elementId);
  element.innerHTML = ''; // 清空目标元素原有内容

  function type() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    } else if (typeof callback === 'function') {
      callback(); // 打字完成后触发回调
    }
  }
  type();
}

2. 封装标题与随机内容的打字逻辑

分别封装headline和random区域的内容生成与打字触发逻辑：

// 生成随机标题并触发打字效果，支持完成回调
function typeHeadline(callback) {
  // 假设starter是已定义的标题数组（需确保全局可访问）
  const randomHeadline = starter[Math.floor(Math.random() * starter.length)];
  typeWriter('headline', randomHeadline, 40, callback);
}

// 生成随机内容并触发打字效果
function typeRandom() {
  const randomContent = getRandomName();
  typeWriter('random', randomContent, 40);
}

3. 调整按钮事件绑定

移除按钮原有的onclick属性，统一通过事件监听控制执行顺序：

<!-- 修改后的按钮HTML -->
<div class="header" id="headline">**Typewrter Generated Headline**</div>
<div class="theory" id="random">**should generate after headline, also as Typewriter**</div>
<button class="button" id="generate">BRAINSTORM</button>

// 按钮点击事件处理
document.getElementById('generate').addEventListener('click', function() {
  // 先执行标题打字，完成后延迟1秒执行随机内容打字
  typeHeadline(function() {
    setTimeout(typeRandom, 1000);
  });
});

4. 保留原有随机内容生成函数

继续使用原有的随机内容生成逻辑：

const list = ["1", "2", "3"];
const list2 = ["1", "2", "3"];

const getRandomNumber = (max) => Math.floor(Math.random() * max);

const getRandomName = () => 
  `${list[getRandomNumber(list.length)]} ${list2[getRandomNumber(list2.length)]}`;

关键改进点 #

• 避免了全局变量i、txt的冲突问题，改用函数内局部变量
• 通过回调函数精准捕获第一个打字效果的完成时机，确保顺序执行
• 打字机逻辑通用化，可复用在不同元素上

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