使用javascript / Jquery編寫具有鍵入效果的文本

Question

我將從服務器端收到一些內容。我試圖在顯示此內容時使輸入效果。

 $("#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> 

問題是我不知道我是否使用正確的方法。 也就是說，不確定使用for循環還是使用setInterval（我使用的是什么）會更好。 還是有更好的方法可以做到這一點。

Answer 1

使用setInterval()絕對比使用loop statement更好，因為使用loop會阻塞您的JS執行，並且您將無法同時執行某些操作。 為避免這種情況，您可以根據字符串長度使用可變速度（如您所做），但是IMO不能提供良好的視覺體驗。

---

我也建議看一看typed.js庫。 （可能還有其他庫可以完成相同的任務，但是我有使用該庫的經驗，並且效果很好！）使用該庫可以通過各種選項對任務進行更靈活的控制，以及為什么還要重新發明輪子？

這是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>