title: Return resolved deferred from another function
body: <p>I'm animating an automated conversation with a bot.</p>
  
  <p>When the first message ("Hi there, take a look at this!") has been printed, I want to go to the next function <code>.then()</code>. However I don't know how to set up the <code>r.resolve()</code> in this case, it's like nested or something.</p>
  
  <pre><code>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 &lt; 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+'&gt;p').empty();
          r = printLetters('#m'+n+'&gt;p', messages[n-1], 0, 40, n);
      }, 400);
      return r;
  }
  
  function startConversation() {
      printMessage(1)
          .then(showThumb1AndTapButton)
          .then(showThumb2AndScroll)
          .then(choosePaymentMethod)
          .then(enterAddress);
  }
  
  startConversation();
  </code></pre>
  
  <p>In this case, I want to get from <code>printMessage(1)</code> to the next <code>.then()</code> function, but I'm not sure how.</p>
  
  <p>I'm not sure how to return the resolved <code>r</code> if the message has finished printing from the other function?</p>