How to Stop the Write On-Screen Effect with jQuery

Question

People wanted to know a way to stop writing on the screen when you arrived at the last text within an array, I improved the code of the Simon Shahriveri see now the code rewritten in jQuery:

'use strict';

var $self = $('#write');

var text = undefined ? binding.value.text : [$self.text()],
    delay = undefined ? binding.value.delay : 100,
    loopNum = 0,
    i = loopNum % text.length,
    fullTxt = text[i],
    isDeleting = false,
    txt = '',
    delta = 200 - Math.random() * 100;

function txtType() {

  if (isDeleting) {
    txt = fullTxt.substring(0, txt.length - 1);
  } else {
    txt = fullTxt.substring(0, txt.length + 1);
  }

  $self.text('').text(txt);

  if (isDeleting) delta /= 2;

  if (!isDeleting && txt === fullTxt) {
    delta = parseInt(delay, 10) || 2000;
    isDeleting = true;
  } else if (isDeleting && txt === '') {
    isDeleting = false;
    loopNum++;
    delta = delay;
  }

  setTimeout(function () {
    txtType();
  }, delta);
}

// Run
$(document).ready(function () {
  txtType();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="write">Please wait, loading...
  <p>

It was adapted for the VueJS as a directive but at that moment the binding.value not in use and I wanted how can I stop the effect made by the loop setTimeout saying that as soon as he writes the last text he stops.

Answer 1

I’m not sure that’s exactly what you want, but it will a possible solution:

'use strict';

   
var text = $('#write').text(),
    arrayElements = ["Primeiro texto"," Segundo texto","Terceiro texto","Quarto texto"],
    delay = 100,
    loopNum = 0,
    arrayLimit = arrayElements.length,
    fullTxt = arrayElements[0],
    isDeleting = false,
    txt = '',
    delta = 200 - Math.random() * 100;

function txtType() 
{
  if (isDeleting)
      txt = fullTxt.substring(0, txt.length - 1);
  else
      txt = fullTxt.substring(0, txt.length + 1);

  $('#write').text('').text(txt);

  if (isDeleting)
      delta /= 2;

  if (!isDeleting && txt === fullTxt)
  {
      delta = parseInt(delay, 10) || 2000;
      isDeleting = true;
  }
  else
  if (isDeleting && txt === '')
  {
      isDeleting = false;
      loopNum++;
      if(loopNum >= arrayElements.length)
          return;
      delta = delay;
      fullTxt = arrayElements[loopNum];
  }

  setTimeout(function () 
  {
    txtType();
  }, delta);
}

// Run
$(document).ready(function () 
{
  txtType();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="write">Please wait, loading...<p>

Answer 2

To stop it in the last text just add a condition to not apply the setTimeout, for this some changes were made.

The first one was to create a variable with a name die.

die = false;

So we need to know if the next array (the next text) exists, for this was used:

if(typeof(text[loopNum + 1]) === 'undefined'){
      die = true;
}else{
      isDeleting = true;
} 

Finally added support for a next sentence using:

 loopNum++;
 fullTxt = text[loopNum];

To break the loop we use:

if(die != true) {
  setTimeout(function() {
    txtType();
    console.log('x');
  }, delta);
}

This is sufficient for it to stop at the last sentence, even if there is only one sentence or if there is more than one.

var $self = $('#write');

var text = undefined ? binding.value.text : [$self.text(), 'Isso é um teste', 'Essa é a última frase definida'],
  delay = undefined ? binding.value.delay : 100,
  loopNum = 0,
  i = loopNum % text.length,
  fullTxt = text[i],
  isDeleting = false,
  txt = '',
  delta = 200 - Math.random() * 100,
  die = false;

function txtType() {

  if (isDeleting) {
    txt = fullTxt.substring(0, txt.length - 1);
  } else {
    txt = fullTxt.substring(0, txt.length + 1);
  }

  $self.text('').text(txt);

  if (isDeleting) delta /= 2;

  if (!isDeleting && txt === fullTxt) {
    delta = parseInt(delay, 10) || 2000;

    if (typeof(text[loopNum + 1]) === 'undefined') {
      die = true;
    } else {
      isDeleting = true;
    }

  } else if (isDeleting && txt === '') {
    isDeleting = false;
    loopNum++;
    fullTxt = text[loopNum];
    delta = delay;
  }


  if (die != true) {
    setTimeout(function() {
      txtType();
      // Apenas para ver o Timeout:
      console.log('SetTimeOut');
    }, delta);
  }

}

// Run
$(document).ready(function() {
  txtType();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="write">Please wait, loading...
  <p>

I added the console.log to verify that the loop will be stopped after the last sentence is reached. ;)

---

If there is only one text it will work normally.