How can i Execute type() function when erase() function completes

Question

Here is a typing animation JS, and here are two function work correctly type() function when we click type button and the erase() function when we click on Erase button.

But now i want to create here a new function that is Erase and Retype means simply i want - When the sentences typed completely and then if we click Erase and Retype button then it should be erase and retype once.

var captionLength = 0;
var caption = '';


$(document).ready(function () {
  captionEl = $('#caption');

  $('#test-typing').click(function () {
    testTypingEffect();
  });

  $('#test-erasing').click(function () {
    testErasingEffect();
  });
});

function testTypingEffect() {
  caption =  $("#qqq").html();
  type();
}

function type() {
  captionEl.html(caption.substr(0, captionLength++));
  if (captionLength < caption.length + 1) {
    setTimeout('type()', 5);
  } else {
    captionLength = 0;
    caption = '';
  }
}

function testErasingEffect() {
  caption = captionEl.html();
  captionLength = caption.length;
  if (captionLength > 0) {
    erase();
  } else {
    $('#caption').html("You didn't write anything to erase, but that's ok!");
    setTimeout('testErasingEffect()', 1000);
  }
}

function erase() {
  captionEl.html(caption.substr(0, captionLength--));
  if (captionLength >= 0) {
    setTimeout('erase()', 5);
  } else {
    captionLength = 0;
    caption = '';
  }
}

<div id="qqq">this is some example sentence which I want to </div>

    
    <input type="button" id="test-typing" value=" Type" />
    <input type="button" id="test-erasing" value="Erase" />  
    <input type="button" id="test-erase-and-retype" value="Erase & Retype" /> 
<br><br>

<span id="caption"></span>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

i tried to this help, but i didn't get success can i know plz what i should to do.

i have already tried this code:

using callback:

  $('#test-erase-and-retype').click(function () {
testErasingEffect(function () {
    testTypingEffect();
});
  });

using when and then condition:

  $('#test-erase-and-retype').click(function () {
  
   $.when(testErasingEffect()).then(testTypingEffect());
      
  });

and this

  $('#test-erase-and-retype').click(function () {

    function firstFunction(){
        testErasingEffect();
    }
    function secondFunction(){
        testTypingEffect();
    }
    
    firstFunction();
});

But all that not working, this only erase text not Re-Type.

Can i know what mistake am making ?

Answer 1

First, there is a link where I took the code about adding waiting time into loop.

Second, I rewrote your code. You can downvote this, but in my onpinion, it's cleaner and easier to manipulate for your project.

$(document).ready(function () {
    $('#test-typing').click(function () {
        type();
    });

    $('#test-erasing').click(function () {
        erase();
    });

    $('#test-erase-and-retype').click(function () {
        loop();
    });
});

const timer = ms => new Promise(res => setTimeout(res, ms));

const wait = 15;//set the waiting time between adding/removing caracters

async function type() {
    while(document.getElementById('caption').innerHTML.length < document.getElementById('qqq').innerHTML.length) {
        document.getElementById('caption').innerHTML += document.getElementById('qqq').innerHTML.charAt(document.getElementById('caption').innerHTML.length);
        await timer(wait);
    }
}

async function erase() {
    while(document.getElementById('caption').innerHTML.length > 0) {
        document.getElementById('caption').innerHTML = document.getElementById('caption').innerHTML.slice(0, -1);
        await timer(wait);
    }
}

async function loop() {
    await erase();
    await type();
}

<div id="qqq">this is some example sentence which I want to </div>

    
    <input type="button" id="test-typing" value=" Type" />
    <input type="button" id="test-erasing" value="Erase" />  
    <input type="button" id="test-erase-and-retype" value="Erase & Retype" /> 
<br><br>

<span id="caption"></span>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

The OP asked this into the comments: But there is type(); function not working again after its complete promise, can you make it for use multitime, means when we click on type(); then it should type again sentences

My anwser to this: Depending on your project, you will want to keep your function as simple as possible. Try to make them do one thing and chain multiple function instead. So, in this case, if there is already something in the capion.innerHtml, make a condition check somewhere like this:

    $('#test-typing').click(function () {
        if (document.getElementById('caption').innerHTML.length > 0) {
            document.getElementById('caption').innerHTML = '';
        }
        type();
    });

With the below code, you can see how you can start reusing your code. This is scalable. And, in my opinion, it's easier to work with, because each thing is seperated into a block of code and you can manipulate what happen faster.

const timer = ms => new Promise(res => setTimeout(res, ms));

const wait = 15;//set the waiting time between adding/removing caracters

async function clickEventType(container, stringToType) {
    if (document.getElementById(container).innerHTML.length > 0) {
        // document.getElementById(container).innerHTML = '';// You can simply flush the container
        var response = await erase(container);// You can also make a call on erase container, which will do the same as the loop...
    } else {
        var response = true;
    }
    if (response !== undefined) {
        await type(container, stringToType);
    }
}

async function type(container, stringToType) {
    while(document.getElementById(container).innerHTML.length < document.getElementById(stringToType).innerHTML.length) {
        document.getElementById(container).innerHTML += document.getElementById(stringToType).innerHTML.charAt(document.getElementById(container).innerHTML.length);
        await timer(wait);
    }
    return true;
}

async function erase(container) {
    while(document.getElementById(container).innerHTML.length > 0) {
        document.getElementById(container).innerHTML = document.getElementById(container).innerHTML.slice(0, -1);
        await timer(wait);
    }
    return true;
}

async function loop(container, stringToType) {
    var response = await erase(container);
    if (response !== undefined) {
        await type(container, stringToType);
    }
}

<div id="qqq">this is some example sentence which I want to </div>
<div id="qq2">Another cool sentence where you can use style="display: none;"</div>
<div id="qq3" style="display: none;">This is the coolest sentence!?</div>

    
    <input type="button" onClick="clickEventType('caption', 'qqq')" value="Type qqq into caption"/>
    <input type="button" onClick="clickEventType('caption2', 'qq2')" value="Type qq2 into caption2"/>
    <input type="button" onClick="erase('caption')" value="Erase caption"/>
    <input type="button" onClick="clickEventType('caption', 'qqq')" value="Loop qqq into caption"/>
    <input type="button" onClick="clickEventType('caption2', 'qq3')" value="Type qq3 into caption2"/>
<br><br>

<div><span id="caption"></span></div>
<div><span id="caption2"></span></div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>