在执行每个条目的请求时遍历数组

这是我的问题。 我有一个包含我需要查找天气的城市名称的数组。 所以我在每个城市循环播放并执行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循环和成功函数中插入了一个alert(),并且它看起来像循环执行cities.length次,然后我得到了成功函数警报。 我的目标是简单地循环访问每个城市获取天气并将其显示在我的页面上以及相关的城市名称。

此外,你会建议我应该如何将内容与演示文稿分开?

谢谢。 :)


我怀疑你的问题与http://ejohn.org/apps/learn/上的例子类似。 在处理for循环时,索引变量cityIdx将在您创建的闭包中更新,因此,当成功执行函数时,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)
//...

由于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
    }
});

为什么不使用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' ); 
                    }
                }
        });
    });
});

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

链接地址: http://www.djcxy.com/p/59081.html

上一篇: Iterating through an array while performing a request for each entry

下一篇: Difference between (function(){})(); and function(){}();