将变量传递给javascript回调函数


passing variale to javascript callback function

面对将变量传递给javascript回调函数的问题。 无法理解，为什么它不起作用。

这是代码。 我通过许多函数传递变量'i'。 'function1'只是一个例子，有一大段代码。

回调中的代码'var tmpl'只是一个例子，不要注意这一点。 问题是为什么我不能传递'i'变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function function1() {
   for (var i = 0; i < 10; i++){
       RequestData(i);
   }
}
function RequestData(i, callback){
    var xhr = new XMLHttpRequest();

    xhr.open('GET', '/getitemID='+i, true);

    xhr.send();

    xhr.onreadystatechange = function() { // (3)
        if (xhr.readyState != 4) return;
        if (xhr.status != 200) {
            alert(xhr.status + ': ' + xhr.statusText);
        } else {
             alert(xhr.responseText);
             callback(JSON.parse(xhr.responseText));
        }
        xhr.close();
    }
}

RequestData(i, function (json) {
    alert('here!');

    var tmpl = [
        '',
        '<button onclick="RequestData("+i+")">Load Data!</button>',
        '#here!'
    ].join('');

    var body = document.querySelector('body');
    alert(body);

    for (var i = 0; i < json.length; i++) {
        var html = tmpl.replace('#here!', json[i].itemid);
        body.insertAdjacentHTML('afterbegin', html);
    }
});

如果我尝试这样调用回调：function RequestData(i, callback) { - 我得到'未解析的类型或变量'我'错误，并且回调不起作用。 否则如果我没有在回调中传递'i' - 我不会收到此错误，但看起来回调也不起作用，因为回调代码不起作用RequestData(function (json) { alert('here!');} - 我没有收到消息' 这里'，但没有错误。 在这两种情况下，回调调用是：callback(JSON.parse(xhr.responseText));

相关讨论

首先，i未定义，因为您正在调用RequestData(i, function())，而未定义i。

您只能从function1()调用RequestData，但该方法永远不会执行，并且永远不会指定回调。

要使其正常工作，请从function1()中删除RequestData(i)调用。 然后将方法调用RequestData(i, function (json) {放在for循环中。 最后拨打function1()，您将获得结果。 (虽然没有干净的代码)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function function1() {
    for (var i = 0; i < 10; i++){
        RequestData(i, function (json) {
            alert('here!');

            var tmpl = [
                '',
                '<button onclick="RequestData("+i+")">Load Data!</button>',
                '#here!'
            ].join('');

            var body = document.querySelector('body');
            alert(body);

            for (var i = 0; i < json.length; i++) {
                var html = tmpl.replace('#here!', json[i].itemid);
                body.insertAdjacentHTML('afterbegin', html);
            }
        });
    }
}
function RequestData(i, callback){
    var xhr = new XMLHttpRequest();

    xhr.open('GET', '/getitemID='+i, true);

    xhr.send();

    xhr.onreadystatechange = function() { // (3)
        if (xhr.readyState != 4) return;
        if (xhr.status != 200) {
            alert(xhr.status + ': ' + xhr.statusText);
        } else {
            alert(xhr.responseText);
            callback(JSON.parse(xhr.responseText));
        }
        //xhr.close(); // this is not an existing function
    }
}

// run the for loop by calling this method
function1();
相关讨论