对于通过AJAX接收的文本，如何逐字显示文本? [英] How do you display text word by word for text that is received via AJAX?

问题描述

我正在尝试通过javascript/jQuery逐字显示文本或逐个字母显示文本.我已经找到了答案.

I'm trying to display text word by word or letter by letter via javascript/jQuery. I've found questions answering that already.

区别在于，此文本是在页面加载后通过AJAX传递的.

The difference is, this text is being delivered via AJAX after the page has loaded.

例如，假设我在某些< p> 标记中包含一些文本.发送AJAX请求，更新< p> 标记内的文本.如何一次将输入的文本显示一个单词?

So for example, let's say I have some text within some <p> tags. An AJAX request is sent, the text inside the <p> tags is updated. How do I display the incoming text one word at a time?

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

AJAX请求

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

推荐答案

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>

这篇关于对于通过AJAX接收的文本，如何逐字显示文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！