JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div id="oneByOne"></div>

JavaScript

var text="This string will be display one by one.";
var delay=500;
var elem = $("#oneByOne");
//text- string
//elem - jQuery element where text is to be attached
//delay - the delay in each text
var addTextByDelay = function(text,elem,delay){
    if(!delay){
        delay = 500;
    }
    if(text.length >0){
        //append first character 
        elem.append(text[0]);
        setTimeout(
            function(){
                //Slice text by 1 character and call function again                
                addTextByDelay(text.slice(1),elem,delay);            
             },delay                 
            );
    }
}

addTextByDelay(text,elem,delay);