Question

我创建了一个for循环并在其中运行Javascript（jquery）代码。但是以某种方式，for循环变量会自动递增。

for (var i=0; i<len; i++) {    //len=2
        console.log(i);  // outputs 0 and 1 as expected 
        $.ajax({
        url:'execute.php',
        method:'GET',
        data:{
            link: items[i]
        },

        success:function(data){
            console.log(i);       //outputs 2 and 2. It sould be 0 and 1
            $("#div1").html(data);
            var item = $(".sticky-item-title .title").html();
            $("#product-"+ i).html(item);
        },
        error:function(data){
            alert('error' + data);
        }
    });
}

$。ajax之前的console.log如预期显示0和1（我在len中有2个项目）。但是成功功能内的console.log显示为2和2。为什么以及在何处递增。我尝试了这段代码

for (var i=0; i<len; i++) {
        var s=i;
        $.ajax({
        url:'execute.php',
        method:'GET',
        data:{
            link: items[s]
        },

        success:function(data){
            console.log(s);          //outputs 1 and 1. It should be 0 and 1 
            $("#div1").html(data);
            var item = $(".sticky-item-title .title").html();
            $("#product-"+ s).html(item);
        },
        error:function(data){
            alert('error' + data);
        }
    });
}

此处变量s显示1和1而不是0和1。

我在这里做错了什么。预先感谢

Answer 1

使用var定义变量时，仅声明一个变量，该变量在每个循环中均被覆盖。在循环之后的异步回调中，变量就是最后一次迭代的值。您可以使用let或通过定义自调用函数（将迭代值作为参数传递）来规避此问题。

for (let i = 0; i < array.length; i++) { ... }

或

for (var i = 0; i < array.length; i++) {
   (function(i) {
   ...
   })(i);
}

Answer 2

Ajax以异步方式工作，因此名称（A）同步（JA）脚本和（X）ml。您在Ajax中声明的成功/错误方法只是传递给Ajax函数的回调方法引用。发送Ajax请求时不会调用它们。一旦从服务器接收到响应或未接收到响应（超时或错误响应），就会调用它们。

您的代码中发生的情况是，发出请求后，我们没有收到时机不同的响应。在第二次循环运行并且var'i'已增加到2，即循环条件为false的最终值后，我们得到了响应。浏览器引擎接收到Ajax请求的响应，然后根据响应调用成功或错误函数。到那时，“ i”变量的值已经设置为2，因此控制台将输出“ 2”。

如果您希望代码打印循环的值，则可以将值作为自定义属性传递到函数声明中，例如：

for (var i=0; i<len; i++) {
    console.log(i);
    $.ajax({
    url:'execute.php',
    method:'GET',
    indexVal:i,
    data:{
        link: items[i]
    },

    success:function(data){
        console.log(this.indexVal);
        $("#div1").html(data);
        var item = $(".sticky-item-title .title").html();
        $("#product-"+this.indexVal).html(item);
    },
    error:function(data){
        alert('error' + data);
    }
});

}

我没有测试代码，但这应该可以工作。请在评论中告诉我它是否适合您。

For循环变量自动递增

2 个答案: