如何在Next.js中循环打字机效果？

Question

我的项目中有这种打字机效果；然而，它只输入一次。我希望打字机效果能够循环播放。就像，我希望它重新开始并再次输入单词。我一直在网上寻找解决方案，并且有一些来源接近解决我的问题，但我不知道如何将他们的代码合并到我的代码中。来源是This。这是我的代码：

"use client";
import React, { useEffect, useState } from "react";

let i = 0;
let txt = "This is the text that will be typed.";
let speed = 50;
let loop = true;

export default function Home() {
  useEffect(() => {
    const headerMessage = document.getElementById("header-message");
    if (headerMessage && i < txt.length) {
      const typeWriter = setInterval(() => {
        headerMessage.innerHTML += txt.charAt(i);
        i++;
      }, speed);
      return () => clearInterval(typeWriter);
    }
  }, []);
  return (
    <main>
      <section>
        <section>
          <p id="header-message"></p>
        </section>
        <section></section>
      </section>
    </main>
  );
}

Answer 1

在下面添加此内容

i++

：

if ((i > txt.length) && loop) {
    headerMessage.innerHTML = "";
    i = 0;
}

这只是将迭代器重置为 0 并清除消息。如果您想在再次输入之前延迟一段时间，您可以添加一个 setTimeout ，如下所示：

if ((i > txt.length) && loop) {
    setTimeout(() => {
        headerMessage.innerHTML = "";
        i = 0;
     }, 1000);
}

将

1000

替换为您要等待的时间（以毫秒为单位）。