javascript - JSHint:不要在循环内创建函数

Question

在这种情况下解决 JSHint 错误的正确方法是什么？删除 function(i) 可以解决这个问题吗？这样会影响性能吗？

for (var i = 0; i + 1 <= pinlatlong.length; i++) {  
    (function(i) {
        setTimeout(function() {
            var latlong_array = pinlatlong[i].lat_long.split(','),
                    marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latlong_array[0],latlong_array[1]),
                    map: map,
                    animation: google.maps.Animation.DROP,
                    icon: pinimage,
                    optimized: false
            });

            // info windows 
            var infowindow = new google.maps.InfoWindow({
                content: pinlatlong[i].title,
                maxWidth: 300
            });

            infoWindows.push(infowindow);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindows[i].open(map, this);
                };
            })(marker, i));

        }, i * 250); // end setTimeout
    }(i)); // end auto function
} // end for

Answer 1

如果外部 (function (i)) 函数被删除，则所有 setTimeouts 将使用相同 i，因为新的 i(来自函数参数)将不会被引入(并且它会 lead to problems like this )。因此，不能通过简单地删除外部匿名函数而不更改其他代码来消除“提示”。 (另请参阅How do JavaScript closures work?)

虽然我总体上不同意这个“提示”(以及 JSLint 的其他一些建议)，但除了仅仅禁用之外，这里还有几种不同的方法，可以在这种特殊情况下避免“提示”/忽略“提示”。

<小时/>

避免警告的一种方法是使用 setInterval 一次并仅使用单个回调函数。然后，迭代(在第 i 个/该点上)在回调内部前进，并在完成后使用 clearInterval 。请注意，此处的目的不是“提高性能”或消除“提示”，而是展示一些人可能更喜欢或认为更干净的替代方法。

function addPins (map, pinLatLong, infoWindows) {
    // In separate function so these variables are guaranteed to be
    // in a new function scope.
    var i = 0;
    var timer = setTimeout(function() {
        if (i == pinLatLng.length) {
           clearTimeout(timer);
           timer = null;
           return;
        }

        var latLng = pinLatLong[i]; // only use `i` here

        var latlong_array = latlong.lat_long.split(','),
        // If combining `var` statements, which is another hint I disagree with,
        // consider NOT using a previously introduced var's value immediately as it
        // makes it harder to see the introduction (of latlong_array in this case).
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(latlong_array[0],latlong_array[1]),
                map: map,
                animation: google.maps.Animation.DROP,
                icon: pinimage,
                optimized: false
            });

        // info windows 
        var infowindow = new google.maps.InfoWindow({
            content: latlong.title,
            maxWidth: 300
        });

        infoWindows.push(infowindow);

        // Eliminated use of extra uneeded closure as all the variables
        // used are contained within the callback's function context.
        google.maps.event.addListener(marker, 'click', return function() {
           infoWindow.open(map, this);
        });

        i++;
    }, 250);
}

作为奖励，它避免了我个人在一般情况下不同意的“提示”。继续，创建数百个函数对象:JavaScript 代码一直在执行此操作。

<小时/>

第二种方法是使用支持 setTimeout具有将作为回调参数提供的附加参数。因此，代码也可以这样修改，而无需额外的 function (i) 导致“提示”警告。虽然这确实会造成许多超时(如原始情况一样)，但它只使用单个函数进行回调，并避免了额外的关闭。

function showPin (i) {
    // Everything that was in the setTimeout callback
    // ..
}

for (var i = 0; i + 1 <= pinlatlong.length; i++) {  
    setTimeout(showPin, 250, i);
}

<小时/>

另一种方法是通过在另一个函数中创建闭包来进行欺骗，该函数实际上执行与原始代码相同的操作。可以说，这比原始版本更干净、更容易阅读，即使本身并没有试图消除“提示”。

function mkShowPin (i) {
    return function () {
        // Everything that was in the setTimeout callback
        // ..
    }
}

for (var i = 0; i + 1 <= pinlatlong.length; i++) {  
    setTimeout(mkShowPin(i), 250);
}