How to stop the effect of writing on screen with jQuery

Navigation
0

People wanted to know a way to stop typing on the screen when it arrived in the last text inside an array, I improved the Simon Shahriveri now see 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><pid="write">Please wait, loading...
  <p>

It has been adapted to VueJS as a directive but at this time binding.value is not in use and I wanted how can I stop the loop effect of setTimeout saying that as soon as I type the last text it stops.

    
asked by anonymous 26.01.2017 / 02:19

2 answers

1

To stop it in the last text, just add a condition to not apply setTimeout , so some changes have been made.

The first one was to create a variable named die . 

die = false;

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

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

Finally the support for a next sentence was added 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 in the last sentence, even if there is only one phrase or if there are 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><pid="write">Please wait, loading...
  <p>
  

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

  

If there is only one text it will work normally.

    
26.01.2017 / 14:42
1

I'm not sure if that's exactly what you want, but there's 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><pid="write">Please wait, loading...<p>
    
26.01.2017 / 14:20
call requires api level 24 (current min is 16): android.icu.text.DecimalFormat # DecimalFormat How to get the POST value and save it to the bank