使用javascript / Jquery编写具有键入效果的文本

Question

I will receive some content from server side.What I trying is to make the typing effect at the time of display this content.

 $("#dislay").click(function() { //this is the dummy content i will recieve from server var contentFromServer = "Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. Seems folly if in given scale. Sex contented dependent conveying advantage can use. Do play they miss give so up. Words to up style of since world. We leaf to snug on no need. Way own uncommonly travelling now acceptance bed compliment solicitude. Dissimilar admiration so terminated no in contrasted it. Advantages entreaties mr he apartments do. Limits far yet turned highly repair parish talked six. Draw fond rank form nor the day eat. In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem easily he on. Dissuade husbands at of no if disposal."; var typerText = ""; var contentLength = contentFromServer.length; var count = 0; var typingSpeed = 100000 / contentLength; var typer = setInterval(function() { if (count > contentFromServer.length) { clearInterval(typer); } typerText += contentFromServer.charAt(count); document.getElementById("dislayArea").innerHTML = "" + typerText + ""; count++; }, typingSpeed); //reset the interval on click of button $("#dislay").click(function() { clearInterval(typer); }); }); 

 div { border: 1px solid gray; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="dislay" type="button">Display Content</button> <div id="dislayArea"></div> 

The question is I do not know if I'm using the correct way or not. That is, not sure if it would be better to use the for loop, or use setInterval(what I am using). Or there is any better approach to do this.

Answer 1

Using setInterval() is definitely better than loop statement , as using loop will block your JS execution and you would not be able to do something during the same time. To avoid this you may use variable speed based on string length (as you have done) but IMO this will not give good visual experience.

---

I will also suggest to take a look at typed.js library. (There can be other libraries that achieve the same task, but I have experience with this library and it works great!) Using the library provides more flexible control over the task with various options and again why to reinvent the wheel ?

Here is an example snippet of typed.js :

 var typed = null; $("#dislay").click(function() { if(typed != null) typed.destroy(); var contentFromServer = "Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. Seems folly if in given scale. Sex contented dependent conveying advantage can use. Do play they miss give so up. Words to up style of since world. We leaf to snug on no need. Way own uncommonly travelling now acceptance bed compliment solicitude. Dissimilar admiration so terminated no in contrasted it. Advantages entreaties mr he apartments do. Limits far yet turned highly repair parish talked six. Draw fond rank form nor the day eat. In post mean shot ye. There out her child sir his lived. Design at uneasy me season of branch on praise esteem. Abilities discourse believing consisted remaining to no. Mistaken no me denoting dashwood as screened. Whence or esteem easily he on. Dissuade husbands at of no if disposal."; var typedOptions = { strings: [contentFromServer], typeSpeed: 60, showCursor: false }; typed = new Typed("#displayArea", typedOptions); }); 

 div { border: 1px solid gray; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.js"></script> <button id="dislay" type="button">Display Content</button> <div id="displayArea"></div>