javascript - 如何从 Angular 中的回调访问外部作用域变量？

Question

我在一些网页上循环，我想检查它们是否可用:

var urls = ['http://www.google.com', 'http://www.facebook.com'];
for(i in urls) {
    $http({method: 'GET', url: urls[i] })
            .success(function(data, status, headers, config) {
                console.log(urls[i] + ' is available.');
            })
            .error(function(data, status, headers, config) {
                console.log(urls[i] + ' is NOT available.');
            });
}

但是 urls[i] 在回调函数中不可用，我如何才能访问？

Answer 1

仅基于该片段，urls 变量应该可以从函数中使用。 但是还有一些其他的事情正在发生......这可能是导致问题的原因。

由于这些方法是异步的，它们将在稍后执行。那么可能发生的事情是这样的:

var urls = ['http://www.google.com', 'http://www.facebook.com'];
for(i in urls) {
    $http({method: 'GET', url: urls[i] })
            .success(function(data, status, headers, config) {
                console.log(urls[i] + ' is available.');
            })
            .error(function(data, status, headers, config) {
                console.log(urls[i] + ' is NOT available.');
            });
}
// some time later...
urls = null;

更糟糕的是，回调中的 i 不会像您期望的那样。循环将首先执行，i 将最终成为(对于两个 URL)最后调用的 URL。这是异步函数范围界定问题的典型案例。

当函数开始执行时，urls 可能为空，或用于其他用途。而且，如前所述，i 不会是您期望的那样。尝试将 $http 调用包装在 immediately-invoked function expression (IIFE) 中:

var urls = ['http://www.google.com', 'http://www.facebook.com'];
for(i in urls) {
    (function(urls, i){
        // urls now "captured" in function-scope variable
        $http({method: 'GET', url: urls[i] })
            .success(function(data, status, headers, config) {
                console.log(urls[i] + ' is available.');
            })
            .error(function(data, status, headers, config) {
                console.log(urls[i] + ' is NOT available.');
            });
    })(urls, i);
}

我还想指出，在数组上使用 for/in 被认为是一个坏主意:您应该将其更改为使用带有索引变量的常规 for 循环，或使用 .forEach。下面是我的做法(这也很方便地消除了 IIFE):

var urls = ['http://www.google.com', 'http://www.facebook.com'];
urls.forEach(function(url){
    $http({method: 'GET', url: url })
        .success(function(data, status, headers, config) {
            console.log(url + ' is available.');
        })
        .error(function(data, status, headers, config) {
            console.log(url + ' is NOT available.');
        });
});