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更好，因为using循环会阻止您的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>

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

1 个答案: