如何在 Messenger 中正确使用 setTimeout 和 Promises

Question

我想通过 Messenger 机器人发送一系列消息，中间有一段时间，并显示打字效果。目前我有这个代码：

      sendTextMessage(recipientId, `Howdy ${snapshot.child("userDetails/firstName").val()}! I’m Marco :)`)
      sendSenderAction(recipientId, "typing_on")
      setTimeout(()=>sendTextMessage(recipientId, "Botting Marco."),1000)
      sendSenderAction(recipientId, "typing_on")
      setTimeout(()=>sendTextMessage(recipientId, "Let me show you some of my recent work. This is the first portfolio bot ever. (afaik) :p"),5000)
      sendSenderAction(recipientId, "typing_on")
      setTimeout(()=>sendTextMessage(recipientId, "How many minutes do you have?"),7000)
      userRef.update({stage:1, class:1, awaiting: true})

但是，由于某些原因，没有出现打字效果。我是否需要使用 Promises 来确保在前一行完成时执行每一行？你能举个例子吗？

Answer 1

我不确定这将如何集成到 Facebook，但要获得延迟的“输入”效果，您希望将字符输入到数组中，然后使用计时器来增加循环时的延迟时间.实现这一点不需要 Promise。

您需要增加每个连续的计时器的延迟，因为所有设置的计时器都将“堆叠”在事件队列中，然后它们都将快速连续执行，创建文本如此之快以至于它会全部显示立刻。您需要确保每个计时器的等待时间都比前一个计时器长。

这是一个例子：

var out = document.getElementById("output");

var message = "This is the text to type...";

// Turn string into proper array so .forEach can be used
var messageArray = Array.prototype.slice.call(message);

// Set the initial stagger amount between timer calls
var stagger = .5;

messageArray.forEach(function(char){
  setTimeout(function(){
    out.textContent += char;
  }, 250 * (stagger++));  // Each timer will have a longer delay on it than the last one
});

<div id="output"></div>

要使其适应您的 Facebook 用例，您只需将 setTimeout 函数的内容替换为对 Facebook Messenger 机器人的调用并将单个字符传递给它。