jquery函数一次显示一个字符答案

【问题标题】：jquery function to display text one character at a timejquery函数一次显示一个字符
【发布时间】：2013-10-19 10:54:24
【问题描述】：

任何人都可以帮助这个 Jquery 吗？我正在尝试创建一个接受文本变量的函数，然后稍微延迟输出每个字母。这是我的代码

//example of function call
var data = "hi you there";
display_text(data);

//function to fade words in individually
function display_text(data) {

    var $words = data.split(" ");

    var html = "";
    for (var i = 0; i < words.length; i++) {
        html += "<span>" + words[i] + " </span>";
    };

    html.insertBefore("#placeholder").hide().each(function(i){
        $(this).delay(i*100).fadeIn(700);
    }
);

【问题讨论】：

标签： javascript jquery

【解决方案1】：

除了使用 jquery 的 .delay 之外，您还可以使用 javascript 的 setTimeout 来实现相同的目的。为了使其成为更通用的变体，您还可以接受要显示文本的元素和延迟作为参数。

这里是代码。

HTML

<body>
   <div id="myText"></div>
</body>

var text="This text will be written one by one.";
var delay=300;
var elem = $("#myText");
//text- string
//elem - jQuery element where text is to be attached
//delay - the delay in each text
var addTextByDelay = function(text,elem,delay){
    if(!elem){
        elem = $("body");
    }
    if(!delay){
        delay = 300;
    }
    if(text.length >0){
        //append first character 
        elem.append(text[0]);
        setTimeout(
            function(){
                //Slice text by 1 character and call function again                
                addTextByDelay(text.slice(1),elem,delay);            
             },delay                 
            );
    }
}

addTextByDelay(text,elem,delay);

我还创建了一个小提琴Enter Text with Delay

【讨论】：

关于这个的一个问题，我有一个 php 文件，它从数据库和其他信息中提取消息，它被发送到 jquery 文件并通过这个函数运行，我如何让它显示多个回显没有它们在同一行上的语句，或者没有在回显的 html 标记等上执行此函数的语句
好吧，我找到了一种解决方法，方法是编写一个 if else 来搜索 0index 以查找之后的下一个值

【解决方案2】：

在定义函数之前存在语法错误和函数调用。这应该可以解决问题：

var data = "hi you there";
function display_text(data) {
  var words = data.split(" ");

  for (var i = 0; i < words.length; i++) {
    var span = $('<span />').text(words[i]).hide().appendTo('#placeholder');
  }

  $('#placeholder').find('span').each(function(i) {
    $(this).delay(i * 100).fadeIn(700);
  });
}
display_text(data);

您的变量html 也是一个字符串，它应该像$(html) 一样被包装以使用jQuery 包装。这样就可以将字符串作为 DOM 注入。

下一个问题是，当您申请 $.each 时，您将处理单个元素（即您的 html）。如果它在调用 each 之前有一个 .find('span')，它可能会起作用。

【讨论】：

这行得通，但是每个字母都写在一个新行上，有没有办法让它写在一行上？
函数声明被提升到顶部，所以这不是问题。你说的语法错误是什么？
@JanDvorak：解析错误； each 缺少右括号。其他问题是：分配给变量$words 并使用words，使用字符串变量html 作为jQuery 包装对象。
@user2376313：这取决于你的 CSS。我的示例使用 span，它们是内联级元素，除非您的 CSS 将它们定义为块，否则它们将出现在一行上。
@adrenalin 不错。我认为在答案中列出这些对提问者很有用。

【解决方案3】：

使用上面的示例，我和我的朋友想出了这个方法，它允许您输入一个数组并使用回调，因此只有在前一个消息完成时才会启动消息。

var message = [
{
  t: 'CLASSIFIED COMMUNICATION',
  d: 200,
  e: '#msgHeader1'
},
{
  t: 'COLONIAL FLEET',
  d: 200,
  e: '#msgHeader2'
},
{
  t: 'BY ORDER OF',
  d: 200,
  e: '#msgHeader3'
},
{
  t: 'ADMIRAL WILLIAM ADAMA',
  d: 200,
  e: '#msgHeader4'
},
{
  t: 'YOU ARE HEARBY REQUESTED AND REQUIRED TO REPORT TO COORDINATES',
  d: 100,
  e: '#msgMain1'
},
{
  t: 'N 40 28 38.078 W 111 53 15.954',
  d: 100,
  e: '#msgMain2'
},
{
  t: ' 1900 HRS',
  d: 100,
  e: '#msgMain3'
},
{
  t: 'STAR DATE 2014.02.14',
  d: 100,
  e: '#msgMain4'
},
{
  t: 'SO SAY WE ALL',
  d: 200,
  e: '#soSayWeAll'
}
];

var text;
var delay;
var elem;

var j = 0;
var run = function (i) {

text  = message[i].t;
delay = message[i].d;
elem  = message[i].e;
var teleText = function (text, elem, delay, callback) {
  if (text.length > 0) {
    $(elem).append(text[0]);
    setTimeout(
      function () {
        teleText(text.slice(1), elem, delay, callback);
      }, delay
    );
  } else if (text.length == 0) {
    console.log('finished');
    j++;
    callback();
  }
};

teleText(text, elem, delay, function () {
  run(j);
});

};

【讨论】：