Zurück aufgelöst von einer anderen Funktion verzögert

Question

Ich animiere eine automatisierte Unterhaltung mit einem Bot.

Wenn die erste Nachricht ("Hallo, schau dir das an!") Gedruckt wurde, gehe ich zur nächsten Funktion .then(). Allerdings weiß ich nicht, wie man die r.resolve() in diesem Fall einrichten, es ist wie verschachtelt oder so etwas.

var messages = [ 
    "Hi there, take a look at this!", 
    "Enter your address", 
    "blah blah" 
]; 

function printLetters(target, message, index, interval, n) { 

    r = $.Deferred(); 
    $('#m'+n).fadeIn(); 

    if (index < message.length) { 
     $(target).append(message[index++]); 
     setTimeout(function() { 
      printLetters(target, message, index, interval, n); 
     }, interval); 
    } else { 
     r.resolve(); 
    } 
    elem.scrollTop = elem.scrollHeight; 

    return r; 

} 

function printMessage(n) { 
    r = $.Deferred(); 
    setTimeout(function(){ 
     $('#m'+n+'>p').empty(); 
     r = printLetters('#m'+n+'>p', messages[n-1], 0, 40, n); 
    }, 400); 
    return r; 
} 

function startConversation() { 
    printMessage(1) 
     .then(showThumb1AndTapButton) 
     .then(showThumb2AndScroll) 
     .then(choosePaymentMethod) 
     .then(enterAddress); 
} 

startConversation(); 

In diesem Fall möchte ich von printMessage(1) auf die nächste .then() Funktion erhalten, aber ich bin nicht sicher, wie.

Ich bin mir nicht sicher, wie man die aufgelöste r zurückgibt, wenn die Nachricht von der anderen Funktion gedruckt hat?

Answer 1

Zuerst definieren Sie Ihre Variablen, verwenden Sie var im erforderlichen Bereich für jede Variable. Das Problem ist, wie Sie die Variable r handhaben. Sie erstellen die aufgeschobene und speichern sie auf r, Rückgabe r und dann 400ms nach dem Ende der Funktion, Erstellen eines neuen r (weil die vorherige r nicht mit var definiert wurden, ist dies eine andere Variable in der Handler-Funktion des Timeout) mit der Ausgabe von printLetters, die andere zurückgestellt ist ... das letzte r hat nichts mit dem Wert zu tun, der von printMessage zurückgegeben wird.

Ich würde vorschlagen, dass Sie Ihre r (oder einen anderen beschreibenden Namen) als global (außerhalb jeder Funktion) definieren, erstellen Sie das verzögerte Objekt nur einmal und arbeiten Sie dann immer mit dieser Variablen.

aktualisieren

Da Sie mehrere Funktionen haben, die eine latente zurückkommen müssen, könnten Sie einfach das als Argument latenten geben. Der Punkt soll mit den Variablen übereinstimmen. Zum Beispiel (nicht getestet, nehmen Sie die suggestiong und versuchen Sie es selbst):

function printMessage(n) { 
    var r = $.Deferred(); 
    setTimeout(function(){ 
     $('#m'+n+'>p').empty(); 
     printLetters(r, '#m'+n+'>p', messages[n-1], 0, 40, n); <--var needed for this r to be defined inside here 
    }, 400); 
    return r; 
} 

Und dann

function printLetters(r, target, message, index, interval, n) { 
    ... 
    ... 
    r.resolve(); <--Note this is the parameter r 
} 

Keine Notwendigkeit, etwas zurückzugeben oder eine zweite latente erstellen, sind Sie mit dem gleichen Objekt arbeiten erstellt und zurückgegeben von printMessage.