.forEach循环：使用变量

Question

我循环遍历一组16个ID并为每个ID分配一个eventListener 。 我想给我的php文件发送一个数字（第一个id为1，第二个为2，等等），但似乎i比我想要的更有活力。 每个id发送17 。

klasses.forEach(function(klass){
    var svgElement = svgDoc.getElementById(klass); //get the inner element by id
    svgElement.addEventListener("mouseup",function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: { "service" : i}
        }).done(function(msg){
            alert(lameArray[i]);
            $("#modalSpan").html(msg);
            $("#modmodal").modal();
        });
    });
    i++;
});

如何将每个设置为特定数字？ 我也尝试过：

var lameArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
...
data: { "service" : lameArray[i]}

Answer 1

什么是i ？ 问题是i是一个全局变量，或者是forEach循环之外的变量，所以当触发mouseup事件时，会使用该 istant中的i值，而不是定义事件侦听器时的值。

请注意，因为你正在使用forEach ，回调函数实际上是用第二个参数调用的，这是一个计数器。 所以你可以使用：

klasses.forEach(function(klass, i) {
    ...
});

现在， i是forEach范围中的变量，并且forEach您的需求。 （ forEach调用了第三个参数也就是集合本身的回调函数- klasses 。你的情况）

注意 ：由于您使用的是jQuery，因此您应该使用更“类似jQuery”的样式进行编码。 所以改变你的代码是这样的：

$.each(klasses, function(i, klass) {
    $("#" + klass).mouseup(function(){
        $.ajax({
            type: "POST",
            url: "buildService.php",
            data: {service: i + 1}
            ...
        });
    });
});

Answer 2

尝试这个：

klasses.forEach(function(klass){
    (function(i) {
        var svgElement = svgDoc.getElementById(klass); //get the inner element by id
        svgElement.addEventListener("mouseup",function(){
            $.ajax({
                type: "POST",
                url: "buildService.php",
                data: { "service" : i}
            }).done(function(msg){
                alert(lameArray[i]);
                $("#modalSpan").html(msg);
                $("#modmodal").modal();
            });
        });
    })(i);
    i++;
});

Answer 3

需要迭代器索引时，请不要使用forEach。 并避免使用JQuery的.each。 绝大部分时间都是完全不必要的，它会在每次迭代时触发回调函数，因此在IE中速度要慢得多。 你可以用while写一个完美的懒/紧循环。

var outerI = klasses.length;

while(outerI--){
    (function(i){
        i+=1;//doesn't affect outerI and you wanted 1-length so we add one.
        //I would personally just add 1 but it also adds clarity to the example

        //crap inside your forEach loop but without the i++
    })(outerI)
}

发生了什么：你告诉一个事件监听器从外部范围引用i。 所以无论我在那场比赛中踢的是什么，都是你得到的。

解决方案：将i的值传递到函数的范围，使其成为局部变量。 与parens的业务只是一种懒惰的方式来定义，评估和执行匿名功能似乎只是一步。 该函数通过第一个parens进行评估（使其可以触发），因此第二个集合就像你放入函数定义的内部'i'参数中的arg。 您将基本上传递给新的本地var来锁定所需的值。

关于while循环的注意事项：while（0）计算为false，停止循环。 如果你考虑它，这很奇怪，因为长度为1比你想要的长1。 随着while（i--）然而我被评估，然后我减少所以在块内你得到长度-1到0这是完美的数组符号。 要在其他运算符命中之前递减i，你通常会做--i但它在懒惰/高效的while循环中很方便。