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

我将从服务器端接收一些内容。我尝试的是在显示这些内容时使键入效果

$（“#dislay”）。单击（函数（）{
//这是我将从服务器接收的虚拟内容
var contentFromServer="笑口常开，少有伟人也从未有过。片刻之间，我的回答到达了。肥胖的婚礼仆人，但男人相信前景。同伴们了解的是，特别是钢琴的连接介绍。不，报纸可以说运动员承认绅士属于他。不，他反对夏天的恋人二十岁。不是他的困难罗丝围在床上。如果在给定的范围内似乎是愚蠢的。性满足的依赖性传达优势可以使用。玩他们想念的话就放弃吧。言归于好的自世风格。我们无需依偎。路过自己不寻常的旅行现在接受床上的赞美。不同的赞美如此终止，没有对比。优势恳求他住在公寓里。界限远未变成高度修缮的教区谈了六次。画了喜欢的等级表，也不吃一天。在后中意射击耶。那里有她的孩子，先生，他的生活。设计在不安的我季节的树枝上赞美尊重。能力话语相信包括保留为否。错了没有我指dashwood被屏蔽。从哪里来或尊重他继续说下去。劝阻丈夫，如果不行的话。”；
var typerText=“”；
var contentLength=contentFromServer.length；
var计数=0；
var typingSpeed=100000/内容长度；
var typer=setInterval（函数（）{
如果（count>contentFromServer.length）{clearInterval（typer）；}
typerText+=contentFromServer.charAt（计数）；
document.getElementById（“dislayare”）.innerHTML=“”+typerText+”；
计数++；
}，打字速度）；
//单击按钮重置间隔
$（“#dislay”）。单击（函数（）{clearInterval（typer）；}）；
})；

div{
边框：1px纯色灰色；
填充：8px；
}

显示内容

使用

setInterval（）

肯定比使用

循环语句要好，因为使用循环将阻止JS执行，并且您将无法在同一时间执行某些操作。为了避免这种情况，您可以使用基于字符串长度的可变速度（正如您所做的那样），但在我看来，这不会提供良好的视觉体验


我还建议您看看这个库（可能还有其他的库可以完成同样的任务，但我有使用这个库的经验，它非常有用！）
使用库可以通过各种选项对任务进行更灵活的控制，为什么还要重新发明轮子

下面是typed.js的一个示例片段：


var type=null；
$（“#dislay”）。单击（函数（）{
如果（已键入！=null）
typed.destroy（）；
var contentFromServer=”笑口常开，少有伟人也从未有过。片刻之间，我的回答到达了。肥胖的婚礼仆人，但男人相信前景。同伴们了解的是，特别是钢琴的连接介绍。不，报纸可以说运动员承认绅士属于他。不，他反对夏天的恋人二十岁。不是他的困难罗丝围在床上。如果在给定的范围内似乎是愚蠢的。性满足的依赖性传达优势可以使用。玩他们想念的话就放弃吧。言归于好的自世风格。我们无需依偎。路过自己不寻常的旅行现在接受床上的赞美。不同的赞美如此终止，没有对比。优势恳求他住在公寓里。界限远未变成高度修缮的教区谈了六次。画了喜欢的等级表，也不吃一天。在后中意射击耶。那里有她的孩子，先生，他的生活。设计在不安的我季节的树枝上赞美尊重。能力话语相信包括保留为否。错了没有我指dashwood被屏蔽。从哪里来或尊重他继续说下去。劝阻丈夫，如果不行的话。”；
变量类型选项={
字符串：[contentFromServer]，
打字速度：60，
showCursor:false
};
typed=新键入的（#displayArea），typedOptions）；
})；
div{
边框：1px纯色灰色；
填充：8px；
}

显示内容
我不介意它是否可以使用just loop。@Muhammaddyaskur你能给出一些想法吗？我会检查。如果你有任何示例，请分享，但当我再次单击它时，它的行为不正确。@NullPointer我想它在内部使用setInterval或setTimeout，有关详细信息，你可能必须在github签出它的源代码。顺便说一句，我已经更新了snippet用于重新单击时重新启动。
typed.destroy（）
必须用于：）