JQuery Terminal typing animation not displaying special HTML characters or class styles until after animation completes - jquery-terminal

Question

I'm using code from the JQuery Terminal examples to emulate typed animation in a console window. I can get the animation to work as intended, but during the course of the animation special HTML characters do not display until after the animation completes. For example, while the animation is running, the console renders '\' instead of ''
This problem also applies to styles assigned to the class of any div that's being animated. The styles do not show up until after the animation is complete.
Below is the code used to animate (adapted from the JQuery Terminal examples page):
var anim = false;
function typed(finish_typing) {
return function(term, message, delay, finished, classname) {
anim = true;
var prompt = term.get_prompt();
var c = 0;
if (message.length > 0) {
term.set_prompt('');
var interval = setInterval(function() {
term.insert(message[c++]);
if (c == message.length) {
clearInterval(interval);
// execute in next interval
setTimeout(function() {
// swap command with prompt
finish_typing(term, message, prompt, classname);
anim = false
finish && finish();
}, delay);
}
}, delay);
}
};
}
var typed_message = typed(function(term, message, prompt, classname) {
if (typeof classname === "undefined") { classname = "default"; }
term.set_command('');
term.echo(message, {
finalize: function(div) { div.addClass(classname); }});
term.set_prompt(prompt);
});
And an example of how it's being called:
E.match(/^\s*ping\s*$/i)?
typed_message(N, "PONG", 10, function(){finished = true;}, "pong"):
In this case, styles applied to the "pong" class that's assigned to the div output by typed_message do not display until after the text is finished typing.
Is there a way to go about having the styles or special characters display while the animation is running?

Answer 1

Slightly modified typed animation using set_prompt instead of insert, also $.terminal.substring and length (that last one need to go to $.terminal.length).
var anim = false;
function typed(finish_typing) {
return function(term, message, delay, finish) {
anim = true;
var prompt = term.get_prompt();
var c = 0;
if (message.length > 0) {
term.set_prompt('');
var new_prompt = '';
var interval = setInterval(function() {
// handle html entities like &
var chr = $.terminal.substring(message, c, c+1);
new_prompt += chr;
term.set_prompt(new_prompt);
c++;
if (c == length(message)) {
clearInterval(interval);
// execute in next interval
setTimeout(function() {
// swap command with prompt
finish_typing(term, message, prompt);
anim = false
finish && finish();
}, delay);
}
}, delay);
}
};
}
function length(string) {
return $('<span>' + $.terminal.strip(string) + '</span>').text().length;
}
var typed_message = typed(function(term, message, prompt) {
term.set_command('');
term.echo(message);
term.set_prompt(prompt);
});
$('body').terminal(function(command, term) {
typed_message(term, '[[;#fff;;class_name]hello]', 400);
});
body {
min-height: 100vh;
margin: 0;
}
.class_name {
text-decoration: underline;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/js/jquery.terminal.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.terminal/1.8.0/css/jquery.terminal.min.css" rel="stylesheet"/>
The example on the site was updated accordingly.