javascript - 使用 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语句更好，因为使用loop会阻塞你的JS执行，你将无法在同一时间执行某些操作。为了避免这种情况，您可以根据字符串长度使用可变速度(正如您所做的那样)，但在我看来，这不会提供良好的视觉体验。

<小时/>

我还建议看看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>