1

我有以下脚本，其中先前的 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();

我会很感激一些帮助。

4

2 回答 2

1

当然是这条线：

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

应该：

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

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

或者你可以期待使用 varthisChar而不是data同样的效果？

于 2012-09-21T10:37:26.157 回答
1

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

看看这里，我评论了我改变的部分，希望能清楚地说明我改变它们的原因：

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

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

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

应该使用该thisChar变量，因为您已经从 var 中获得了要附加的字符data，但我认为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()非常值得一读。

于 2012-09-21T10:57:58.963 回答