Question

我有以下脚本，其中先前的ajax调用提供数据并输出html。它工作正常，除了我不能让每个新的调用在新行上打字，而不是它取代以前的数据。我尝试追加，但随后又添加了一个字符，重复输入每个单词。

var isInTag = false;

function typetext() {
var thisChar = data.substr(c, 1);
if( thisChar == '<' ){ isInTag = true; }
if( thisChar == '>' ){ isInTag = false; }
$('#field').html(" "+data.substr(0, c++));
if(c < data.length+1)
    if( isInTag ){
        typetext();
    }else{
        setTimeout("typetext()", 100);
    }
else {
    c = 1;
    data = "";
}
}

在ajax电话中：

data = '<span class="input">' + data + '</span><br />\n';
c = 0;
typetext();

我将不胜感激。

Answer 1

当然是这条线：

$('#field').html(" "+data.substr(0, c++));

应该是：

$('#field').append(" "+data.substr(c, c++));

因为你不是一次写出1个字符，而是将字符串从0写到c++

或者你可以确定使用var thisChar而不是data来达到同样的效果吗？

Answer 2

好的，您的代码存在一些问题，我已经设法让一个版本工作（我认为）非常接近您想要的版本。

看看这里，我已经评论了我改变的部分，希望能够清楚地了解我为什么要改变它们：

http://jsfiddle.net/MjS4t/2/

基本上，有两个问题 - 首先，这一行：

$('#field').html(" "+data.substr(0, c++));

应该使用thisChar变量，因为您已经从data var中添加了想要追加的字符，但不确定，但我认为substr()调用是导致的它可以回显错误的字符（或者一遍又一遍地反复出现）。

我把它改为： $('#field').append(thisChar);，然后将c++移到下一行 - 这使我更容易阅读。

接下来，你的超时调用是错误的。只有在将函数分配给如下变量时才能使用函数名称：

var functionName = function(){ alert('hello world'); };

但是您使用了不同的语法并将其声明为：

function functionName(){ ... }

所以，我改变了setTimeout调用：

setTimeout("typetext()", 100);

对此：

setTimeout(function() {typetext()},100);

通过这种方式，它显示文本略有延迟，并将其输入。

有关使用javascript设置超时的详细信息，请参阅此处：http://www.sean.co.uk/a/webdesign/javascriptdelay.shtm

jQuery中的$.delay()非常值得一读。

jquery用超时附加字符串

2 个答案: