Question

我正在尝试使用JavaScript + Ajax做一个小网站，我希望以递归方式进行。我以前从未使用过ajax，问题是我不知道完成功能。代码看起来像这样：

var cont = 0;
var function1 = function (query) {
    $.ajax({
        url: '...',
        data: {
                .
                .
                .
        },
        success: function (response) {
            instructions;
            function2(param1, param2);
        }
    });
};
var function2 = function (query, param2) {
    $.ajax({
        url: '...',
        data: {
                .
                .
                .
        },
        success: function (response) {
            instructions;
            function3(param1, param2, param3);
        }
    });
};
var function3 = function (query, param2, param3) {
    if (cont == 2) {
        console.log("finish");
        return;
    }
    var test = $.ajax({
        url: '...',
        data: {
                .
                .
                .
        },
        success: function (response) {
            if (...) {
                cont++;
                instructions;
                var audio = new Audio(...);
                audio.play();
                audio.onended = function () {
                    instructions;
                    function3(query, param2, param3);
                    return;
                };
            } else {
                instructions;
                function3(query, param2, param3);
            };
            return;
        }
    });
    return;
};
document.getElementById('search-form').addEventListener('submit', function (e) {
    e.preventDefault();
    function1(document.getElementById('query').value);
}, false);

所以基本上，当我cont == 2时，我尝试使用function3与return;一起退出javascript success: function (response)，但程序的某些部分（我不知道是function3还是完整的javascript GameObject label = new GameObject ("mylabel"); label.AddComponent<Text> (); label.transform.SetParent(transform); label.GetComponent<Text> ().text = "some long text"; label.GetComponent<Text> ().font = Resources.GetBuiltinResource(typeof(Font), "Arial.ttf") as Font; label.GetComponent<Text> ().fontSize = 30; label.GetComponent<RectTransform> ().anchorMin = new Vector2 (0.5f, 1f); label.GetComponent<RectTransform> ().anchorMax = new Vector2 (0.5f, 1f); label.GetComponent<RectTransform> ().pivot = new Vector2 (0.5f, 1f); label.GetComponent<RectTransform> ().localPosition = new Vector2 (0f, 0f);//THIS DOESN'T SEEM TO BE WORKING, BECAUSE THE LABEL IS NOT PLACE AT (0F,0F) WHEN i RUN THE PROGRAM!! label.GetComponent<Text> ().color = Color.black; label.GetComponent<Text> ().horizontalOverflow = HorizontalWrapMode.Wrap; label.GetComponent<Text> ().verticalOverflow = VerticalWrapMode.Overflow; label.GetComponent<RectTransform> ().sizeDelta = new Vector2 (1000, 100);）仍在运行，正在执行说明。

我怎么解决这个问题？

Answer 1

首先，正确执行此操作的方法是使用jQuery的延迟对象。

正如您可能已经注意到的那样，程序不只是等待ajax请求，然后继续执行'success'处理程序。这是因为Javascript使用非阻塞/等待模型。所以你调用$ .ajax（{params，...}），这会发送请求，但是之后的任何内容都会立即运行，而不是等待。然后，一旦顶级函数完成执行并且没有其他任何正在运行，就可以处理响应，并调用'success'处理程序。

那么如何正确地做这些事情呢？首先安排您的请求函数：

function doRequest1() {
    return $.ajax({
        url: '...',
        data: {
                .
                .
                .
        }
    });
}

function doRequest2(parameter) {
    return $.ajax({
        url: '...',
        data: {
                .
                p: parameter
                .
        }
    });
}

请注意，我们没有提供成功处理程序，但我们返回$ .ajax返回的值。这是一个延迟对象，用于表示已发送但尚未接收/处理响应的请求。您可以将处理程序附加到对象，如下所示：

var r1 = doRequest1();

r1.then(function() {
    // Do stuff on success...
});

关于这些对象的一个好处是它们可以使用'then'链接。 'then'接受一个函数，该函数获取旧请求的值并生成下一个要执行的新请求：

var allRequests = doRequest1().then(function(result1) {
    return doRequest2("hello");
});

'allRequests'变量现在是表示doRequest2结果的延迟对象。你怎么得到这个结果？你可以使用'then（）'，就像任何其他延迟的那样：

allRequests.then(function(result) {
    alert("All requests completed. Result of last one: " + result);
});

确保您了解1请求的结果如何用于设置下一个请求的参数，甚至可以决定下一个请求。

如果您不需要一个请求的结果来确定下一个请求，而只是想运行一些请求并等待它们全部完成，您可以使用快捷方式'when'：

$.when(doRequest1(),doRequest2(), doRequest3()).then(function(result1,result2,result3) {
    // All done
});

延迟的另一个好处是可以取消它们：

allRequests.abort();

使用上面的内容，希望您可以看到如何重新构建代码，以便在完成所有3个代码后获得一系列具有函数运行的请求。

Answer 2

通过程序流程观察全局变量cont的值。当function3()被调用时，它可能（从不）等于2，这就是你的程序继续的原因。

javascript和ajax中的递归函数

2 个答案: