Question

这是我的问题。我有一个数组，其中包含我需要查找天气的城市名称。所以我循环遍历每个城市并执行AJAX请求来检索天气。

var LOCATION = 'http://www.google.com/ig/api?weather=';

$( document ).ready( function() {
    for( var cityIdx = 0; cityIdx < cities.length; cityIdx++ ) {
        $.ajax({
            type: 'GET',
            url: LOCATION + cities[ cityIdx ],
            dataType: 'xml',
            success: function( xml ) {
                if( $( xml ).find( 'problem_cause' ) != 0 ) {
                    // Do what I want with the data returned
                    var weather = $( xml ).find( 'temp_c' ).attr( 'data' );
                }
            }
        });
    }
});

我遇到的问题是，在成功功能中，我无法访问城市名称（通过城市[cityIdx]）。我在for循环和success函数中插入了一个alert（），似乎循环执行了 cities.length 次，然后我得到了成功函数警报。我的目标是简单地遍历每个城市，获取天气并在我的页面上显示它以及相关的城市名称。

另外，您建议我将内容与演示文稿分开？

谢谢。：）

Answer 1

我怀疑您的问题类似于http://ejohn.org/apps/learn/的示例。索引变量cityIdx在处理for循环时创建的闭包中更新，因此当运行成功函数时，cityIdx将指向数组中的最后一个元素。解决方案是使用已评估的匿名函数来创建独立的上下文，其中索引值不会更新。

//...
success: (function(cities, idx) {
    return function( xml ) {
      if( $( xml ).find( 'problem_cause' ) != 0 ) {
        // Do what I want with the data returned
        // use cities[idx]
        var weather = $( xml ).find( 'temp_c' ).attr( 'data' );
      }
    };
  })(cities, cityIdx)
//...

Answer 2

由于Javascript使用函数进行闭包，我发现对我来说最简单的方法就是将for循环的内容包装在一个内联函数中，该函数将当前城市名称复制到一个始终可以访问的变量。

$(document).ready(function() {
    for (var cityIdx = 0; cityIdx < cities.length; cityIdx++) {
        new function() {
            var currentCity = cities[cityIdx];
            $.ajax({
                type: 'GET',
                url: LOCATION + currentCity,
                dataType: 'xml',
                success: function(xml) {
                    alert(currentCity);
                    if ($(xml).find('problem_cause') != 0) {
                        // Do what I want with the data returned
                        var weather = $(xml).find('temp_c').attr('data');
                    }
                }
            });
        }(); // the "();" calls the function we just created inline
    }
});

Answer 3

为什么不使用jQuery迭代你的数组呢？使用jQuery的每个函数：

    var LOCATION = 'http://www.google.com/ig/api?weather=';

$( document ).ready( function() {

    $.each(cities, function()  {
    //assign the current city name to a variable
        var city = this;
        $.ajax({
                type: 'GET',
                url: LOCATION + city,
                dataType: 'xml',
                success: function( xml ) {
                    if( $( xml ).find( 'problem_cause' ) != 0 ) {
                        alert(city);
                            // Do what I want with the data returned
                        var weather = $( xml ).find( 'temp_c' ).attr( 'data' ); 
                    }
                }
        });
    });
});

成功功能中的提示显示正确的城市。

Answer 4

最简单的方法是让你的AJAX请求返回城市名称。

Answer 5

由于各种原因，我会尝试将success函数拉出到一个单独定义的函数中，然后在包含城市名称的ajax调用中创建一个闭包。首先，一个单独的成功处理程序：

function city_success(xml, name) {
  // your success handling code here
}

然后在ajax调用中更改成功绑定：

success: function (xml) { city_success(xml, cities[ cityIdx ]); },

在对每个条目执行请求时迭代数组

5 个答案: