在循环中声明的函数引用外部范围的变量可能会导致语义混乱。怎么了？ [英] Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?

问题描述

有人能告诉我我的代码有什么问题，特别是全屏活动部分。谢谢！

Can someone tell me what is wrong with my code, especially the "Full screen event" part. Thanks!

JSLint说在循环中声明的引用外部范围变量的函数可能会导致混淆语义。

JSLint says "Functions declared within loops referencing an outer scoped variable may lead to confusing semantics."

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(45.502808, -73.571486),
    };
    var map = [];
    map[0] = new google.maps.Map(document.getElementById("map1"), mapProp);
    map[1] = new google.maps.Map(document.getElementById("map2"), mapProp);
    map[2] = new google.maps.Map(document.getElementById("map3"), mapProp);

    new google.maps.Marker({
        position: new google.maps.LatLng(45.502808, -73.571486),
        map: map[0], title: 'Sunnyvale '
    });
    new google.maps.Marker({
        position: new google.maps.LatLng(45.502808, -73.571486),
        map: map[1], title: 'Sunnyvale '
    });
    new google.maps.Marker({
        position: new google.maps.LatLng(45.502808, -73.571486),
        map: map[2], title: 'Sunnyvale '
    });


    google.maps.event.addDomListener(window, "resize", function () {
        for (i = 0; i < 3; i++) {
            var center = map[i].getCenter();
            /*var bounds = map[i].getBounds();*/
            var zoom = map[i].getZoom();
            google.maps.event.trigger(map[i], "resize");
            /*map[i].fitBounds(bounds);*/
            map[i].setCenter(center);
            google.maps.event.addListenerOnce(map[i], 'bounds_changed', function(event) {
                this.setZoom(zoom);
            });
        }

    });

    /** Full Screen event */

    for (i = 0; i < 3; i++) {
        var centerChanged = [];
        var zoomChanged = [];
        google.maps.event.addListener(map[i], 'center_changed', function() {

            var centerChanged[i] = map[i].getCenter();
            var zoomChanged[i] = map[i].getZoom();
        });
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
            map[i].setCenter(centerChanged[i]);
            google.maps.event.addListenerOnce(map[i], 'bounds_changed', function (event) {
                this.setZoom(zoomChanged[i]);
            });
        });
    }

}
google.maps.event.addDomListener(window, 'load', initialize);

JSLint说在循环中声明的引用外部范围变量的函数可能会导致混淆语义。

JSLint says "Functions declared within loops referencing an outer scoped variable may lead to confusing semantics."

推荐答案

在你的循环中，我从0开始并迭代，直到它等于3.这意味着每当你在循环之后访问i时完成运行（例如，在监听器函数中）它将等于3.您可以在以下代码中看到：

In your loop, i starts at 0 and iterates until it's equal to 3. That means that whenever you access i after the loop has finished running (for example, in a listener function) it will be equal to 3. You can see this in the following code:

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

这将打印所有5，因为在循环完成迭代后调用该函数。

That will print all 5s because the function is being called after the loop has finished iterating.

编辑：要解决此问题，您可以使用javascript的hip新声明语句：let和const。它们仅存在于声明它们的范围内，因此它们的值不会被覆盖。

To fix the issue, you can use javascript's hip new declaration statements: let and const. They exist only in the scope that they are declared, and their values are therefore not overwritten.

for(var i = 0; i < 5; i++) {
    const j = i;
    setTimeout(function() {
        console.log(j);
    }, 1000);
}

编辑2：用替换 var i 让我似乎也能正常工作：

Edit 2: Replacing var i with let i appears to work as well:

for(let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

编辑3：如果es6不是一个选项，你可以将i的值绑定到函数：

Edit 3: If es6 isn't an option, you could bind i's value to the function:

for(var i = 0; i < 5; i++) {
    setTimeout((function(j) {
        console.log(j);
    }).bind(null, i), 1000);
}

这篇关于在循环中声明的函数引用外部范围的变量可能会导致语义混乱。怎么了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！