Question

我是JavaScript的新手，我有一个ptoblem，代码如下：

function job1() {
    var subText1="";
    var subText2="";
    var text="";
    var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789";

    // Use the delay function to create a full text in 20 * 150 milliseconds
    var i = 0, 
    action = function() {
                var temp = vocabulary.charAt(Math.floor(Math.random() * vocabulary.length));
                text+= temp;
                document.write(text + "<br>");
                i++;
                if (i < 20) {
                            setTimeout(action, 150);
                } else {
                    // The first subText is from position 0 until some random number random between 0 and the text length
                    subText1 = text.slice(0, Math.floor(Math.random() * text.length));
                    // The second subText is from where the first subText ends until the last character form the text input
                    subText2 = text.slice(subText1.length, text.length);

                    // output of the subText1 and the subText2 for the first time
                    document.write("subText1: " + subText1 + "<br>");
                    document.write("subText2: " + subText2 + "<br>");
                    document.write("text: " + text + "<br>");
                }
            };

        setTimeout(action, 0);

        // output of the subText1 and the subText2 once more
        document.write("subText1: " + subText1 + "<br>");
        document.write("subText2: " + subText2 + "<br>");

        // NextJob: job2, job3
        // job dependency
        var nextJob = "job2, job3";
        var prevJob = "null";

        // results
        return { 
        subText1_RT : subText1,
        subText2_RT : subText2
        };
}

我的问题是，我需要将subText1部分中的subText2和action = function()....部分纳入此部分：

return { 
   subText1_RT : subText1,
   subText2_RT : subText2
};

但subText1和subText2变量为空。

以下是代码的小提琴：http://jsfiddle.net/TalGoz/4tgc372e/

看起来job1()函数的所有部分都在action = function()部分之前执行。让它像函数一样工作是非常重要的，我不能为了我的目标而将函数分开。

我希望有人能帮助我看到问题并解决问题。

Answer 1

编辑：由于JavaScript的工作方式，文本值的最终处理需要在回调函数中 - 它是单线程的，这意味着一次只运行一段代码。查看原始代码，执行首先进入job1()。它将action()构建为函数而不执行它，然后它们转到setTimeout（），它设置action()运行但尚未运行它。要使setTimeout（）实际执行，即使时间值为0，当前代码也必须完成执行。接下来，它转到job1()中的结束代码，即document.Write，job1 / job3，并返回该对象。由于尚未执行action()，因此尚未设置subText对象。

一旦控件离开job1()并完成任何当前代码，浏览器将从您的setTimeout（）调用开始执行action()。在action()里面还有其他的setTimeout调用，那些行为类似 - 当前代码必须完成执行，然后等待，最后指定的代码将执行。

总而言之，您必须使用回调函数，因为在使用setTimeout（）排队的任何代码执行之前，执行必须以所有当前代码结束。您不能使用job1()之类的异步函数并使其同步，因为当您在job1()内时，没有任何异步setTimeout（）调用可能会执行。

在某些其他语言中，例如C ++或Java，您可以使代码并行运行，因此您可以在＆＃34;后台线程中生成代码＆＃34;然后当前线程可以等待它完成，为您提供所需的效果。你不能用JavaScript做到这一点。所有异步函数都需要回调。回调的字面意思是，＆＃34;当你完成时回电话给我＃34;。将来，Web Workers可能会支持一次运行多个代码：Web Workers

以下是使用回调whendone的示例，如下所述。在设置值时调用它。

function job1(whendone) {
    var subText1="";
    var subText2="";
    var text="";
    var vocabulary = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz0123456789";

    // Use the delay function to create a full text in 20 * 150 milliseconds
    var i = 0, 
    action = function() {
            var temp = vocabulary.charAt(Math.floor(Math.random() * vocabulary.length));
            text+= temp;
            document.write(text + "<br>");
            i++;
            if (i < 20) {
                        setTimeout(action, 150);
            } else {
                // The first subText is from position 0 until some random number random between 0 and the text length
                subText1 = text.slice(0, Math.floor(Math.random() * text.length));
                // The second subText is from where the first subText ends until the last character form the text input
                subText2 = text.slice(subText1.length, text.length);

                // output of the subText1 and the subText2 for the first time
                document.write("subText1: " + subText1 + "<br>");
                document.write("subText2: " + subText2 + "<br>");
                document.write("text: " + text + "<br>");

                // Now we're done
                whendone(subText1, subText2);
            }
        };

    setTimeout(action, 0);
}

job1(function(subText1, subText2) {
    // output of the subText1 and the subText2 once more
    document.write("subText1: " + subText1 + "<br>");
    document.write("subText2: " + subText2 + "<br>");

    // NextJob: job2, job3
    // job dependency
    var nextJob = "job2, job3";
    var prevJob = "null";

    // results
    var returned = { 
        subText1_RT : subText1,
        subText2_RT : subText2
    };

    // Your code doing something with 'returned' here
});

您想要的值最终会出现在returned中。如果要对值执行某些操作，请在returned =语句后添加代码。

在JavaScript中的另一个函数内使用延迟函数

1 个答案: