Question

我试图通过javascript / jQuery逐字或逐字显示文字。我已经找到了回答问题的问题了。

不同之处在于，该文本在页面加载后通过AJAX传递。

例如，假设我在某些<p>代码中有一些文字。发送AJAX请求，更新<p>标记内的文本。如何一次显示一个单词的传入文本？

<p> Some awesome text inside here </p>

AJAX请求

<p> Even more awesome text inside here, but displayed one word at a time </p>

Answer 1

var textToDisplay = "Even more awesome text inside here, but displayed one word at a time",
  $output = $("p");

$("button").click(function() {
  var displayInt;
  textToDisplay = textToDisplay.split(' ');
  $output.empty();
  displayInt = setInterval(function() {
    var word = textToDisplay.shift();
    if (word == null) { return clearInterval(displayInt); }
    $output.append(word + ' ');
  }, 300);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Some awesome text inside here </p> <button>Load</button>

Answer 2

试试这个，在你的javascript文件中：

var returnedString = "Even more awesome text inside here, but displayed one word at a time"; //this is your returned string
var stringToArray = returnedString.split(" ");
for(var i = 0; i < stringToArray.length; i++)
{
   $("#containerElement").append(stringToArray[i] + "<br/>");
}

您还可以使用setTimeout控制下一个单词的显示时间。

如何通过AJAX接收的文本逐字显示文本？

2 个答案: