Leitura dinâmica usando javascript

Quanto mais avançamos no tempo, maior é a necessidade de fazer mais em menos tempo. A leitura é um dos principais meios para enriquecer a nossa mente. Mas muitas vezes não encontramos tempo para ler tudo o que gostaríamos. E se arrumássemos uma maneira de ler mais em menos tempo?

Durante a leitura, o nosso globo ocular se move de um lado para o outro continuamente para seguir o curso do texto. Isso demanda tempo e esforço físico. É fácil perceber que se conseguirmos ler sem ter que mover o globo ocular, conseguiremos ler mais rápido e cansaremos menos.

Nosso método se resume a pegar cada palavra de um texto e mostrar uma por uma no mesmo lugar, uma substituindo a anterior. Assim poderemos ler sem mover o globo ocular. Mas como fazemos isto?

Dado um texto qualquer armazenado em uma variável, o que precisamos fazer é um split para termos um array onde cada elemento do array é uma única palavra e então ir atualizando o Dom de modo a mostrar os elementos do array sequencialmente. Segue o código javascript que faz este trabalho:

function read(){
    text = document.getElementById("text").value; //get the text from a textarea with id text
    myView = document.getElementById("viewText"); //get a reference to a span which we are going to use to read the text
    text = text.replace(/(:? +|\n)/g," "); // replace more then one space for just one space and replace \n for one space
    var array = text.split(" "); // split the text using the space as a delimiter
    var current = 0;
    var delay = 500; // time in milliseconds
    function refresh(){ // this function will be called recursively.
        myView.textContent = array[current] //refresh the dom with the next word
        current++;
        setTimeout(function(){ // every "delay" milliseconds the refresh function will be called until the array reach the end.
            if(array[current]){
                refresh();
            }
        },500)
    }
    refresh(); // start the recursion 
}

document.getElementById("read").onclick = read; //attach a listener to a button with Id read

Segue o html e css que funcionará junto com este código javascript

<textarea id="text" style="width:100%;height:100px">A leitura, que é um testemunho oral da palavra escrita de diversos idiomas, com a invenção da imprensa, tornou-se uma atividade extremamente importante para a civilização, atendendo múltiplas finalidades.</textarea>
<div id="view" style="text-align:center;margin-top:30px;position:relative;">
    <span id="viewText">fasdfaf</span>
    <div id="center" class="center"></div>
</div>
<button style="margin-top:30px;" id="read">Read now</button>

.center{
    background:rgba(200,200,200,0.2);
    width:10px;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    margin-left:-5px;
}

Para ver este exemplo em execução, veja esse link para o jsfiddle

Gostou? Tire um minutinho e dê sua contribuição para Drall Dev Community no Patreon!

Artigos relacionados: