有没有比这更好的实现 setTimeout（）的方法？-解网

问：

typingEffect()遍历像聊天机器人一样在屏幕上键入的字符串数组。我最初放进去是为了简化事情，但很难根据某些字符串的长度来确定清除文本功能的时间。typedMessage.textContent = "";typingFunction()

我试图改变时间，但由于循环功能只能设置为一个设定的时间（我认为），我无法让它工作。

有没有更好的方法来编写它，使其更具可重复性，同时能够操纵 .任何帮助都非常感谢！typedMessage.textContent = "";

const body = document.querySelector("body");
const typedMessage = document.querySelector("div");
const messageArray = ["Welcome to your new chatBuddy!", "I want to ask you a few questions...", 
                      "Some of them might be kind of weird..", "But, hey... we're pals, right?!", 
                      "After all, my name is ChatBuddy, so...let's do this!", "Would you rather have no arms or no legs?"];

/**
 * function typingEffect()
 * iterates through messageArray[] to type out messages
 * setTimeout feature to iterate through characters/clear text
 * @param {string} message 
 * @param {string} item
 * @param {integer} i 
 * @returns 
 */
    const typingEffect = (message, item, i = 0) => {
    message.textContent += item[i];
    if (i === item.length - 1) {
        return;
    }
    setTimeout(() => { 
        typingEffect(message, item, i + 1)
    }, 30);
}

typingEffect(typedMessage, messageArray[0]);
setTimeout(() => {
    typedMessage.textContent = "";
}, 3000)
setTimeout(() => {
    typingEffect(typedMessage, messageArray[1]);
}, 3100)
setTimeout(() => {
    typedMessage.textContent = "";
}, 7000)
setTimeout(() => {
    typingEffect(typedMessage, messageArray[2]);
}, 7100)
setTimeout(() => {
    typedMessage.textContent = "";
}, 11000)
setTimeout(() => {
    typingEffect(typedMessage, messageArray[3]);
}, 11100)
setTimeout(() => {
    typedMessage.textContent = "";
}, 15000)

JavaScript 循环 setTimeout

首先，CSS不是适合您任务的工具（因为您最终发现阅读Yogi发布的链接）。其次，您在函数的 JSDoc 中的前提不正确 - 这模糊了您想要解决的实际问题 - 使其不清楚。您的函数应该接受 Array 参数吗？还是字符串？还是两者兼而有之？还应该是 {HTMLElement}，而不是 {string}。* iterates through messageArray[] to type out messages* @param {string} messagemessage

答：

1赞 Roko C. Buljan 11/6/2023 #1

首先，创建两个函数，一个用于键入消息，另一个用于接受 Array 并在超时 2 秒后将每条消息传递给第一个函数：

const typingText = (elem, txt, done = () => {}) => {
  let i = 0;
  elem.textContent = ""; // Clear before typing!
  const next = () => {
    elem.textContent += txt[i];
    if (i === txt.length - 1) return done();
    i += 1;
    setTimeout(next, 30);
  };
  next(); // Start!
};

const typingArray = (elem, arr, done = () => {}) => {
  let i = 0; 
  const next = () => {
     typingText(elem, arr[i], () => {
       if (i === arr.length - 1) return done();
       i += 1;
       setTimeout(next, 2000);
     });
  };
  next(); // Start!
};

const elDiv = document.querySelector("div");
const messages = [
  "Welcome to your new chatBuddy!",
  "I want to ask you a question...",
  "Can you combine the two functions into one?"
];
typingArray(elDiv, messages, () => { console.log("All done!"); });

<div></div>

这两个函数都有一个函数，该函数在完成时调用，为第一个函数键入文本，然后为第二个函数键入数组。done

对于家庭作业（因为这两个函数非常相似），您可以尝试将它们转换为接受字符串或字符串数组的单个蓝图函数;并相应地使用。

谢谢！修复了 @param{}.据我了解，这也解决了时间问题。它们之间有一个 2 秒的计时器，所以这让我可以自由地写任何我想写的东西。另外，作为一个参数对我来说是新的。我认为这是一种更清晰的写作方式，说明此执行已“完成”。感谢您的输入。done = ()return

0赞 Bryan 11/7/2023

只要在最后重新阅读你的解释，我想我明白了。再次感谢。

0赞 Roko C. Buljan 11/7/2023

@Bryan（将空函数分配给变量或参数）称为：noop 函数，在我们的例子中，它将用作回调函数，允许传递任何自定义函数，就像我们上面对登录所做的那样： .简而言之，通过传递第三个参数函数，这将替换完成的 noop - 并在x = () => {}typingArray(elDiv, messages, () => { console.log("All done!"); });return done();

0赞 Bryan 11/7/2023

棒！为你所做的一切干杯。

上一个：根据 python 中的 if-else 语句将元素附加到不同的列表中

下一个：为每个月添加循环以检查可用日期 python 不仅提到了一年中的月份

有没有比这更好的实现 setTimeout（）的方法？

Is there a better way to implement setTimeout() than this?

评论

评论

有没有比这更好的实现 setTimeout（） 的方法？

Is there a better way to implement setTimeout() than this?

评论

评论

有没有比这更好的实现 setTimeout（）的方法？