如何在JavaScript中使用setTimeout实现打字效果函数每句结束后暂停

实现方案 #

你只需要调整setTimeout的延迟时间逻辑，在检测到单句文本输出完成时，使用更长的间隔时间即可，以下是修改后的完整代码：

修改后的JS代码 #

const texts = ["get a quote", "get a Tweet"];
let count = 0;
let index = 0;
let currentText = "";
let letter = "";
// 可自定义参数：单字输出间隔、句间暂停间隔，单位ms
const typeSpeed = 100;
const pauseAfterSentence = 2000;

function type() {
  if (count === texts.length) {
    count = 0;
  }
  currentText = texts[count];
  letter = currentText.slice(0, ++index);

  document.getElementById("welcome").textContent = letter;
  // 计算下一次执行的延迟时间
  let delay = typeSpeed;
  if (letter.length === currentText.length) {
    count++;
    index = 0;
    // 单句打完，使用句间暂停时长
    delay = pauseAfterSentence;
  }

  setTimeout(type, delay)

};
type()

改动说明 #

• 新增了两个可自定义的常量，分别控制单字打印间隔、整句打完后的暂停间隔，你可以根据需要自行调整数值
• 不再固定setTimeout的延迟值，会根据当前是否完成整句打印自动切换间隔时长，既保证打字速度合适，也能留出足够的时间让用户读完整句内容

HTML代码不需要做任何调整，和你原来的代码保持一致即可。

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