Question

function say(str){
    for(i=0;i<str.length;i++){
        setTimeout(function(){
            $("#text").append(str[i]);
            console.log(str[i]);
        },
        i*200);
    }
}

say("Hello World !");

看：http://jsfiddle.net/XnKNX/

似乎每个str[i]都未定义;

如何让它有效？我正在学习，所以如果有人解释的话会很棒。感谢。

Answer 1

这是因为i在调用您给setTimeout的回调时具有循环结束的值。

解决方案是将其更改为

function say(str){
    for(i=0;i<str.length;i++){
        (function(i){
          setTimeout(function(){
            $("#text").append(str[i]);
          },
          i*200);
        })(i);
    }
}

这会在迭代时将i的值保存在立即调用的内部函数中。

Answer 2

我不建议使用for循环并试图获得实际的时间排队。以setTimeout递归调用函数对我来说更有意义，并且不会遇到关闭问题。您可以使用：

function say(str) {
    (function iterator(index) {
        if (index < str.length) {
            $("#text").append(str.charAt(index));
            console.log(str.charAt(index));
            setTimeout(function () {
                iterator(++index);
            }, 200);
        }
    })(0);
}
say("Hello World !");

DEMO： http://jsfiddle.net/XnKNX/6/

.charAt()是获取字符串字符的首选方法，因为较旧的IE不支持[]索引。

如果你想保持for循环（无论出于何种原因），你可以这样设置：

var say = (function () {
    var generateTyper = function (s, index) {
        return function () {
            $("#text").append(s.charAt(index));
            console.log(s.charAt(index));
        };
    };
    return function (str) {
        for (var i = 0, j = str.length; i < j; i++) {
            setTimeout(generateTyper(str, i), i * 200);
        }
    };
})();
say("Hello World !");

DEMO： http://jsfiddle.net/8kxFd/1/

Answer 3

在寻找要在我的网站上使用的脚本时，我偶然发现了这个问题。看了一会儿后，我决定写自己的。

这是Github上的link，希望它可以帮助某人：）

简要说明

dataJSON

创建简单的打字效果

3 个答案: