时间戳

首页 > 解决方案 > 使用 JS setTimeout() 时如何传递变量

javascript - 使用 JS setTimeout() 时如何传递变量

问题描述

我正在使用 clippy.js 使视口中的角色通过气球说话。我希望通过在包含不同文本的数组中传递元素来让字符按顺序说出文本，并且在说出文本之间有延迟。为此，我使用了一个在文本传递之间具有特定延迟的 for 循环。这部分使用 setTimeout() 可以很好地工作，但是，可能由于 JS 的异步特性，只有最后一个文本变量被传递给函数。这是代码片段：

for (n=0;n<4;++n){
    x = tmptext[n];
    setTimeout(() => {agent.speak(x);}, 5000 + n*5000);
}

tmptext[] 是一个包含不同文本的数组，而 cagent.speak() 是使角色说出文本的函数，否则效果很好。问题是该字符仅说出数组中的最后一个文本 4 次，尽管它们之间的时间适当。显然，该函数仅使用在 for 循环的最后一次迭代中分配给它的变量 x 的值（在本例中为 x=tmptext[3] 的值）执行了 4 次。

如果我直接使用 tmptext[] 数组，则根本没有从该数组传递到函数的文本。例如，

for (n=0;n<4;++n){  
    setTimeout(() => {agent.speak(tmptext[n]);}, 5000 + n*5000);
}

在这里，通过在 cagent.speak() 函数中使用 alert 来监控这一点，确认没有传递任何文本，实际上气球出现了 4 次空。这是因为正在使用的 n 的值是它在迭代中的最后一个值，这使它成为 5 并且超出了数组的范围。

JS 的异步特性似乎是这里的问题，我不熟悉处理它。如何以适当的时间将数组中每个元素的值传递给函数？非常感谢这里的帮助。

标签： javascriptasynchronoussettimeoutclippy.js

解决方案

这段代码解决了这个问题：

for (n=0;n<4;++n){
    let x = tmptext[n];
    setTimeout(() => {agent.speak(x);}, 5000 + n*5000);
}

推荐阅读