So verwenden Sie setTimeout und Promises in Messenger ordnungsgemäß

Question

Ich möchte eine Reihe von Nachrichten über einen Messenger-Bot mit einiger Zeit dazwischen senden und den Typisierungseffekt anzeigen. Zur Zeit habe ich diesen Code:

 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}) 

Der Typisierungseffekt erscheint jedoch aus einigen Gründen nicht. Muss ich Promises verwenden, um sicherzustellen, dass jede Zeile ausgeführt wird, wenn die vorherige beendet ist? Kannst du mir ein Beispiel zeigen?

Answer 1

Ich bin mir nicht sicher, wie dies in Facebook integriert wird, aber um einen verzögerten "Tipp" -Effekt zu erhalten, sollten Sie die Zeichen in ein Array eingeben und dann einen Timer verwenden, der die Verzögerungszeit erhöht Schleife. Versprechen sind nicht erforderlich, um dies zu erreichen.

Sie benötigen jeden aufeinander folgenden Timer, um eine erhöhte Verzögerung zu haben, da alle Timer, die eingerichtet werden, in der Ereigniswarteschlange "gestapelt" werden und dann alle in schneller Folge ausgeführt werden und den Text so schnell erstellen, dass er angezeigt wird alles auf einmal. Sie müssen sicherstellen, dass jeder Timer länger als der vorherige wartet.

Hier ist ein Beispiel:

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>

Dieser Anwendungsfall zu Ihrem Facebook anzupassen, würden Sie mit dem Aufruf der Facebook Messenger Bot und Pass den Inhalt der setTimeout Funktion ersetzen Sie einfach das einzelne Zeichen dazu.