for .getJSON中的变量显示错误[重复]

This question already has an answer here:

这个问题在这里已有答案:

Calling an asynchronous function within a for loop in JavaScript 8 answers

在JavaScript 8中的for循环中调用异步函数

JavaScript closure inside loops – simple practical example 39 answers

内部循环中的JavaScript闭包 - 简单实用示例39答案

I have the following code (javascript/jQuery)

我有以下代码(javascript / jQuery)

$(function(){
    for(var i=0;i<3;i++){

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

console log:

3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }

isn't it true, that console.log(i); should log 0 in the first loop, 1 in the second and 2 in the third? But somehow it always returns 3 :(

是不是真的,那就是console.log(i);应该在第一个循环中记录0,在第二个循环中记录1,在第三个循环中记录2个?但不知怎的,它总是返回3 :(

4 个解决方案

#1

Try this

$(function(){
    for(var i=0;i<3;i++){
        (function (index) {
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(index);
                console.log(data);
            });
        })(i)
    }
});

#2

If you are using ecma6 then you can use let to avoid closure issue. It create block scoping.

如果您使用ecma6,那么您可以使用let来避免关闭问题。它创建块范围。

$(function() {
    for (let i = 0; i < 3; i++) {

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
            console.log(i);
            console.log(data);
        });
    }
});

otherwise,You can use IIFE

否则,你可以使用IIFE

$(function() {

    for (var i = 0; i < 3; i++) {

        (function(i) {

            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(i);
                console.log(data);
            });

        })(i)

    }
});

Similary,you can use bind.

同样,你可以使用bind。

#3

Can you display result in $.getJson success?

你能在$ .getJson成功中显示结果吗?

 $(function(){
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
              for(var i=0;i<3;i++){
                console.log(i);
                console.log(data[i]);
               }
            });
        });

Your i=3 because your loop does not wait $.getJson success. It is working and increment values without delay.

你的i = 3因为你的循环没有等待$ .getJson成功。它正在工作并毫不拖延地增加值。

#4

-2

Try This

    $.ajaxSetup({
        async: false
    });

    $(function(){
    for(var i=0;i<3;i++){
        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

#1