24

Lo que estoy haciendo es un efecto que hace parecer un texto que se escribe por si solo, el código que tengo es el siguiente:

Es un simple <body> con dos elementos para ver el ejemplo (también en: 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>

La duda que tengo es que no sé si estoy usando el método correcto para hacerlo. Es decir, no tengo claro si sería mejor usar el loop for, o usar setInterval (como está en el ejemplo), también si el código puede ser simplificado aún más de lo que está.

Pero claro, si uso for tendré que introducir un setTimeout dentro de éste... en eso es en lo que estoy dando vueltas.

4 respuestas 4

24

Tomando como base tu codigo. y usando setInterval(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>

3
  • Gracias por tu aclaración x-rw's!
    – lromeraj
    Commented el 31 ene. 2017 a las 6:18
  • 4
    @x-rw funciona incorrectamente si se pulsa el botón varias veces. Commented el 31 ene. 2017 a las 10:17
  • @Nokonoko Eso se corrige añadiendo lo siguiente: $("#write").click(function() { clearInterval(tiempo); })
    – lromeraj
    Commented el 31 ene. 2017 a las 11:53
15

Con setInterval está bien. Te pongo un ejemplo usando setInterval y Generadores de ES6. Uso el generador para generar, valga la redundancia, línea por línea a partir de un texto dado.

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>


Nota: código solo funcionará en navegadores que soporten Generators.

1
  • 2
    WoW! Veo que te lo has currado, gracias a ti también guzgarcia's.
    – lromeraj
    Commented el 31 ene. 2017 a las 6:46
7

EDICIÓN

Ya que he mejorado para mi uso personal el código y la funcionalidad de esta respuesta, lo comparto con la comunidad:

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>

RESPUESTA ORIGINAL

Escribí hace un tiempo una respuesta parecida en StackOverflow en Inglés, que utiliza Promises.

El siguiente ejemplo utiliza Observables de la librería RxJS.

// 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>

2
  • 1
    que interesante solucion Commented el 31 ene. 2017 a las 2:28
  • 1
    Probare también tu solución Jose! Gracias
    – lromeraj
    Commented el 31 ene. 2017 a las 6:47
0

Como bien mencionas en tu pregunta puedes usar setTimeout() para mostrar cada carácter en un intervalo de tiempo especificado.

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>

De esta forma se mostraría el efecto "typeWriter" (máquina de escribir) en tu página.

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.