javascript for 循环中的异步调用

Question

菜鸟问题。它可能是重复的，但我无法理解如何重组代码。我应该如何构造以下代码，以便控制台打印以下内容：

这里1 这里2 这里1 这里2 这里1 这里2

现在开始：

这里1 这里1 这里1 这里2 这里2 这里2

感谢您的帮助。

var record;

for ( i = 0; i < 3; i++ ) {
    sendRequest(selectTestsToRun('something1'), 'someTest1');
}

this.someTest1 = function(resObj, testToRun){
    console.log('Here1');
    record = resObj.value;
    sendRequest(selectTestsToRun('something2'), 'someTest2');
};

this.someTest2  = function(resObj, testToRun){
    console.log('Here2');
};

function selectTestsToRun(toDo){
    var data;

    switch( toDo) {
        case 'something1':
            data = 'postMessage';
            break;

        case 'something2':
            data = 'postMessage'+record;
            break;
    }

    return data;
}

function sendRequest(data , toDo ){

    GM_xmlhttpRequest({
        method: 'POST',
        url:  url,
        data: data,
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        onload: function(response) {
            var resObj = JSON.parse(response);
            this[toDo](resObj,toDo);
        }
    });

}

Answer 1

您根本不需要 for 循环。相反，您希望 someTest2 开始 "loop":

的下一次迭代

var i = 0;
next();

function next() {
    if (i < 3) {
        sendRequest(selectTestsToRun('something1'), 'someTest1');
        ++i;
    }
}

this.someTest2  = function(resObj, testToRun){
    console.log('Here2');
    next();                                          // <==== Note
};

在上文中，我将其融入 someTest2，但您当然可以传递回调以将循环与 someTest2 分离。

Answer 2

您必须记住，AJAX 调用是异步发生的，而循环是同步执行的。

循环调用 test1 来回调用，而 AJAX 请求至少需要 300 毫秒才能往返于服务器。这肯定会在循环结束后很长时间内发生。

您需要使用回调（或承诺）来调用下一个函数。您可以在回调中放置确定下一个调用哪个的逻辑。这是使用 jQuery 进行 Ajax 通信的示例。

我走老路了，使用了一个只由第一个调用函数递增的计数器。当计数器达到您的极限时，它就像一个开关并停止粘性循环。

你可以看到它有效 here:https://jsbin.com/wohife/

$(document).ready(function() {

    var counter = 0;


    function test1() {
        if (counter < 3) {
            sendRequest(1);
            console.log('here 1');
        }

        counter++;
    }

    function test2() {
        sendRequest(2);
        console.log('here 2');
    }

    function sendRequest(requesterId) {
        $.ajax({
            url: 'https://jsbin.com/sohefe/1.json',
            type: 'GET'
        })
        .success(function(data, status, req) {

            if (requesterId === 1) {
                test2();
            }
            else {
                test1();
            }

        });
    }

    test1();
});

javascript for 循环中的异步调用

javascript async call in a for loop

javascript

tampermonkey