等待递归 function 完成 javascript

Question

I'm quite rusty on my javascript and I'm using the code from this answer in a text game to animate text.

Show text letter by letter

var showText = function (target, message, index, interval) {   
    if (index < message.length) {
      $(target).append(message[index++]);
      setTimeout(function () { showText(target, message, index, interval); }, interval);
    }
}

I'd like to wait until its finished to reveal a button but no matter how I edit it, nothing seems to wait, it just moves on right away. Is there any solution or better way to show the text?

Answer 1

I added an if statement inside of the setTimeout so that when the last letter shows, the button will show at the same time. If I added it as an else if of the existing if statement, it waited the interval time after the last letter was shown to show the button.

 var showText = function(target, message, index, interval) { if (index < message.length) { $(target).append(message[index++]); setTimeout(function() { showText(target, message, index, interval); if (index == message.length - 1) { $("#btn").show() } }, interval); } } showText($("#box"), "TEST", 0, 1000)

 #btn { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"></div> <button id="btn">Show</button>