Home / Questions / 46823
Accepted
lromeraj
Asked: 2020-01-31 11:14:15 +0800 CST 2020-01-31 11:14:15 +0800 CST

Make the effect of a text that is being written by itself

  • 772

What I am doing is an effect that makes it look like a text that is written by itself, the code I have is the following:

It's a simple <body>with two elements to see the example (also in: jsfiddle ).

$("#write").click(function() {

  //Es un fragmento de texto extraido del periódico "El país"
  var text = "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas, las niñas eran violadas por padres, tíos y sobrinos. Por esto fue multado en 2011 con unos 700 euros.";

  var writer = "";
  writer.length = 0; //Limpiar el string
  var maxLength = text.length;
  var count = 0;
  var speed = 5000 / maxLength; //La velocidad varía dependiendo de la cantidad de caracteres

  var write = setInterval(function() {

    if (count > text.length) {
      clearInterval(write);
    }

    writer += text.charAt(count);
    document.getElementById("text").innerHTML = writer;
    count++;

  }, speed);

  $("#write").click(function() {
    clearInterval(write);
  }); //si se pulsa en el botón limpiar el intervalo

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

<button id="write" type="button">Write!</button>
<h1 id="text"></h1>

The doubt I have is that I don't know if I am using the correct method to do it. That is to say, I am not clear if it would be better to use the loop for, or to use setInterval(as it is in the example), also if the code can be simplified even more than it is.

But of course, if I use forI'll have to put a setTimeoutinto it... that's what I'm mulling over.

javascript

4 Answers

  1. Best Answer

    Based on your code. and usingsetInterval(function(){ 

    function escribir(contenedor,writer,speed){

   longitud = writer.length;

   cnt = document.getElementById(contenedor);
   var i=0;
   tiempo = setInterval(function(){
      cnt.innerHTML = cnt.innerHTML.substr(0,cnt.innerHTML.length-1) + writer.charAt(i)+ " ";
      if(i >= longitud){
         clearInterval(tiempo);
         cnt.innerHTML = cnt.innerHTML.substr(0,longitud);
         return true;
      } else {
         i++;
      }},speed);
};

var texto =  "Llamada oculta. Al otro lado del teléfono suena una voz muy grave, fuerte, de un hombre con un inglés de ligero acento escandinavo. Soy Lars Hedegaard, creo que querías hablar conmigo. Verse no es posible. Ni se encuentra en Copenhague ni puede dar su paradero al estar bajo protección policial. Hedegaard, historiador y periodista danés de 74 años, es un reconocido y duro crítico del islam. Le grabaron en su casa, sin previo aviso según defiende, diciendo cosas como que en las familias musulmanas.";
$("#write").click(function() {
escribir("text",texto,100);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button id="write" type="button">Write!</button>
        <h1 id="text"></h1>
</body>

    • 23

  2. With setIntervalis fine. I give you an example using setIntervaland Generadoresfrom ES6. I use the generator to generate , forgive the redundancy, line by line from a given text.

    function temporizator() {
  const write = function() {
    let letters = letterGenerator();
    window.setInterval(function() {
      let next = letters.next();
      if (!next.done) {
        let letter = next.value;
        let content = document.querySelector('#code').textContent;
        if (letter === 'new line') {
          document.querySelector('#code').textContent = content + '\n';
        } else {
          document.querySelector('#code').textContent = content + letter;
        }
        highlight();
      }
    }, 70);
  }

  const highlight = function() {
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();
  }

  const letterGenerator = function*() {
    const lines = temporizator.toString().split(/\n/);
    for (let line of lines) {
      for (letter of line) {
        yield letter;
      }
      yield 'new line';
    }
  }
  
  return {
    start: write
  }
}

temporizator().start();
    @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Source+Code+Pro:400,600,700');


*,
*:before,
*:after {
  box-sizing: border-box;
}

#editor {
  border: 2px solid #ddd;
  border-radius: 5px;
  box-shadow: 2px 5px 25px 1px rgba(0,0,0,.15);
  display: block;
  margin: 50px auto;
  max-width: 530px;
  width: 88%;
}

#editor header {
  background: -webkit-linear-gradient(top, #f7f7f7, #f2f2f2);
  background: linear-gradient(to bottom, #f7f7f7, #f2f2f2);
  border-bottom: 1px solid #e9e9e9;
  padding: 5px;
  padding: .35rem;
  position: relative;
  text-align: center;
}

#editor header h3 {
  color: #333;
  font-family: 'lato';
  font-size: 15px;
  margin: 0;
}

#editor header #buttons {
  display: inline-block;
  left: 10px;
  line-height: 10px;
  position: absolute;
  top: 9px;
}

#editor header #buttons hr {
  border: none;
  border-radius: 100%;
  cursor: pointer;
  display: inline-block;
  height: 15px;
  margin: 0 4px;
  width: 15px;
}

#editor header #buttons hr.red {
  background-color: #e74c3c;
}

#editor header #buttons hr.yellow {
  background-color: #f39c12;
}

#editor header #buttons hr.green {
  background-color: #27ae60;
}

#editor pre {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}

#editor pre #code {
  display: block;
  font-family: 'source code pro';
  font-size: 15px;
  margin-top: -1.2em;
  margin-bottom: -2.4em;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  padding: .65rem;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    background-color: #f5f5f5;
    border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
  background-color: #ccc;
    border-radius: 25px;
    
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/atom-one-light.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/languages/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>

<div id="editor">
  <header>
    <h3>Temporizator.js</h3>
    <section id="buttons">
      <hr class="red" />
      <hr class="yellow" />
      <hr class="green" />
    </section>
  </header>
  <pre>
    <code id="code" class="javascript"></code>
  </pre>
</div>

    Note: code will only work in browsers that support Generators.

    • 15

  3. EDITION

    Since I have improved the code and functionality of this answer for my personal use, I am sharing it with the community:

    const ACTION_ADD = 'ACTION_ADD';
const ACTION_REPLACE = 'ACTION_REPLACE';

class AsyncWritter {
    textContentArr;
    numTicks = 3;
    isInfiniteLoop = true;

    constructor(selector, messages){
      let element = document.querySelector(selector);
      
      this.textContentArr = messages;

      Rx.Observable.concat(
        ...this.textContentArr.map( (x) => 
          this.write(x).finally( ()=> element.textContent = '')
        )
      )
      .repeat( this.isInfiniteLoop ? null : 1)
      .subscribe(
        (val) => {
          //console.log(val)
          switch(val.action){
            case ACTION_ADD : element.textContent += val.value; break;
            case ACTION_REPLACE : element.textContent = element.textContent.slice(0, element.textContent.length - 1); break;
          }
        }
      )
    }

    write(text){
      return Rx.Observable
        .concat(
          ...Array
            .from(text).map( (val) =>{

              let { 
                  action = ACTION_ADD
                , value = val
              } = val;

              let obs = (action === ACTION_ADD 
                ? this.add(value) : this.replace() )

              return Rx.Observable
                .concat( obs, this.add('|'), this.replace() )
            }), 
          this.tick().repeat(this.numTicks),
          this.replaceWithTick().repeat(text.length)
        )
    }

    randomDelay(bottom, top) {
      return Math.floor( Math.random() * ( 1 + top - bottom ) ) + bottom;
    }

    tick(start = 1200, end = 1200){
      return Rx.Observable.concat(
        this.add('|'),
        this.replace(start, end)
      )
    }

    add(value, start = 10, end = 100){
      return Rx.Observable
        .of({ action : ACTION_ADD, value })
        .delay( this.randomDelay(start, end) );
    }

    replace(start = 10, end = 100){
      return Rx.Observable
        .of({ action : ACTION_REPLACE })
        .delay( this.randomDelay(start, end) );
    }

    replaceWithTick(){
      return Rx.Observable.concat(
        this.replace(), this.tick(10, 100)
      )
    }

}


let messages = [
    'JEJEJEJEJ',
 [
      ...Array.from('Hola que'),
      {action : 'ACTION_REPLACE', value : 1},
      'é',
      ...Array.from(' tal?')
    ]
  ];

new AsyncWritter('div', messages);
    <div></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

    ORIGINAL ANSWER

    I wrote a similar answer on StackOverflow a while back , which uses Promises.

    The following example uses Observables from the RxJS library.

    // Creamos una función que devolverá un observable
const escribe = function(palabra){
  // creamos un array con cada elemento de la frase
  const array = palabra.split('');
  // contador
  let count = 0;
  // Observable que devolverá el elemento actual
  // del array. y aumentará el contador
  let obs = Rx.Observable.create(
    observer =>{
      observer.next(array[count++]);
      if(!array[count]) observer.complete();
    }
  );
  // Devolvemos un observable
  return Rx.Observable
    // Crea un intervalo de tiempo cada 60 ms
    .interval(60)
    .timeInterval()
    // que devolverá el observable creado anteriormente
    .flatMap(()=> obs)
    // Ejecutaremos hasta que el observable "obs"
    // devuelva undefined
    .takeWhile(val => val != undefined)
}
let textArea = document.querySelector('#textArea');

escribe(escribe.toString()).subscribe(
  data => {
    textArea.innerHTML += data;
  }
);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.min.js"></script>

<div id="textArea"></div>

    • 7

  4. As you mention in your question you can use setTimeout()to display each character in a specified time interval. 

    var i = 0;
var msg = 'Stackoverflow en español!...';
var velocidad = 200;

function typeWriter() {
  if (i < msg.length) {
    document.getElementById("escribetexto").innerHTML += msg.charAt(i);
    i++;
    setTimeout(typeWriter, velocidad);
  }
}
    <!DOCTYPE html>
<html>
<body  style="background-color:orange;">

<button onclick="typeWriter()">Clic para mostrar texto</button>

<h1>
<font face="verdana" color="white">
<p id="escribetexto"></p>
</font>
</h1>



</body>
</html>

    This would display the "typeWriter" effect on your page.

    enter image description here

    • 0