javascript - 按顺序执行 JavaScript

Question

我正在尝试一次打印一个字符到 div。然而，它可以工作，它同时运行两条线，所以我得到的只是一团乱麻。

如何让命令依次运行？

function print(str){
    var arr = str.split("");
    var i = 0;
    function write(){
        setTimeout(function(){
            if(i < arr.length){
                var cont = $(".content").html();
                cont = cont.replace("_","");
                $(".content").html(cont + arr[i] + "_");
                i++;
                write();
            }
        },30);
    }
    write();
}

var str = [
    "I am the egg man",
    "I am the walrus"
];

for(x in str){
    print(str[x];
}

jsFiddle:http://jsfiddle.net/PscNC/1/

Answer 1

您有两个异步函数，您可以在另一个函数之后启动一个函数，以便它们并行运行。如果您希望它们串行运行，那么您必须在第一个完成时创建某种通知，以便您可以触发下一个的开始，依此类推。这可以通过多种方式完成(我在下面展示了三种方法)。您可以使用回调，可以使用 Promise，并且可以完全避免对异步操作进行排序。

方法 #1 - 完成回调

这里向您的打印函数添加一个回调，然后使用它来触发下一个字符串，然后更改字符串的迭代以使用回调:

工作演示:http://jsfiddle.net/jfriend00/Lyu5V/

$(function() {
    function print(str, fn) {
        var i = 0;
        var items = $(".content");

        function write() {
            setTimeout(function() {
                if (i < str.length) {
                    items.html(items.html().replace("_", "") + str.charAt(i) + "_");
                    i++;
                    write();
                } else {
                    fn();
                }
            }, 100);
        }
        write();
    }

    var data = [
            "I am the egg man...",
            "I am the walrus"
        ];

    var i = 0;
    function next() {
        if (i < data.length) {
            print(data[i++], next);
        }
    }
    next();
});

仅供引用，确实没有理由将字符串拆分为数组。您可以使用 .charAt(index) 方法访问字符串的各个字符。

<小时/>

方法 #2 - Promises - 使用 .then() 来排序操作

而且，这是使用 Promise 而不是传递回调的代码版本:

工作演示:http://jsfiddle.net/jfriend00/97UtX/

$(function() {
    function print(str) {
        var i = 0, items = $(".content"), def = $.Deferred();

        function write() {
            setTimeout(function() {
                if (i < str.length) {
                    items.html(items.html().replace("_", "") + str.charAt(i) + "_");
                    i++;
                    write();
                } else {
                    def.resolve();
                }
            }, 100);
        }
        write();
        return def.promise();
    }

    var data = [
            "I am the egg man..",
            "I am the walrus"
    ];

    data.reduce(function(p, item) {
        return p.then(function() {
            return print(item);
        });
    }, $.Deferred().resolve());

});

<小时/>

方法#3 - 通过将数据组合到一个操作中来避免排序

而且，如果您想稍微简化/干燥它，您可以这样做，只需将其变成一个更长的操作即可避免对连续操作进行排序，我对您的代码做了一些简化:

工作演示:http://jsfiddle.net/jfriend00/TL8pP/

$(function() {
    function print(str) {
        var i = 0, items = $(".content");

        function write() {
            setTimeout(function() {
                if (i < str.length) {
                    items.html(items.html().replace("_", "") + str.charAt(i) + "_");
                    i++;
                    write();
                }
            }, 100);
        }
        write();
    }

    var data = [
            "I am the egg man..",
            "I am the walrus"
    ];
    print(data.join(""));

});