在 JavaScript 中顺序触发多个随机超时

Question

我知道乍一看（由于标题）这看起来像是“你在发帖之前尝试过搜索谷歌吗？”之一。 问题，但我似乎无法找到我遇到的具体问题的答案。 抱歉，如果我是菜鸟……仍在学习:)

我需要在 javascript 中模拟暂停，但 setTimeout(function_call, timeout) 函数对我不起作用。 原因是...当调用 setTimeout 函数时，它会异步调用该函数。

一点背景：
我正在尝试模拟以随机时间间隔将文本输入到 div 中。 我希望它看起来就像一个人在查看页面时实际上正在输入消息一样。 由于超时是随机间隔并且函数调用是异步进行的，因此文本最终会以随机顺序打印。

这是我迄今为止所掌握的内容的片段：

typeString: function(s)
{
    for(var i=0;i<s.length;i++)
    {                      
        var c = s.charAt(i);
        var temp = setTimeout("MessageType.typeChar('" + c + "')", this.genRandomTime());
    }
}

在此先感谢您的帮助。

CJAM

更新：通过将计时器延迟添加到变量中，它使我能够抵消异步调用的超时。 感谢大家的快速回复。 这是更新后的代码：

typeString: function(s)
{
    var delay = 0;

    for(var i=0;i<s.length;i++)
    {                     
        var c = s.charAt(i);
        setTimeout("GoogleTyper.typeChar('"+c+"')", delay += this.genRandomTime());
    }
}

Answer 1

您是否尝试过累积设置超时？ 将一个变量放在循环之外并将其初始化为 0。现在我们将其称为超时。 在循环的每次迭代开始时向此变量添加随机时间量，并使超时发挥作用。 这样，您就可以确保按顺序调用函数。

Answer 2

您的问题是您正在使用一个计时器，从现在开始您的所有时间都被延迟 - 下一个计时器需要在前一个计时器之后触发。 只需将之前的计时器延迟添加到新计时器即可。

typeString: function(s)
{
    var delay = 0;
    for(var i=0;i<s.length;i++)
    {                      
        var c = s.charAt(i);
        delay = delay + this.genRandomTime();
        var temp = setTimeout("MessageType.typeChar('" + c + "')", delay );
    }
}

Answer 3

不要将要显示的字符传递给每个计时器事件，而是让每个事件处理程序从队列（数组、列表等）中获取下一个字符，以便保持顺序。