使用javascript/Jquery编写具有键入效果的文本
使用javascript/Jquery编写具有键入效果的文本
提问于 2018-07-14 22:28:02
我将从服务器side.What接收一些内容，我试图在显示这些内容时使键入效果。
$("#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(我正在使用的)更好。或者有更好的方法来做到这一点。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-14 23:02:17
使用setInterval()肯定比使用loop statement更好，因为使用循环会阻塞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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51340418
复制相关文章
相似问题