訪問在javascript中的內聯函數內進行的變量修改

Question

我試圖將本地變量傳遞給JavaScript中的內聯函數，並讓該（內聯）函數操縱這些變量，然後能夠訪問變化的值包含功能。這甚至有可能嗎？這裏是我正在使用的代碼示例：

function addArtists(artist, request, origElm, xml){ 

//variables 
var artistIdArray = []; 

/*coding*/ 

//traverse xml 
$('element', xml).each(function(){ 

/*coding*/ 

$.ajax({ 
    /*parameters*/ 
    success: function(html) { 
    var artistAbb = html; 

    /*coding*/ 

    //add this element's id to the array of ids to make it draggable later 
    artistIdArray.push(artistAbb); 
    alert(artistIdArray[artistIdArray.length - 1]); 

}//end on success  

});//end ajax call 

});//end each(function() 

alert(artistIdArray.length); 

} 

問題是我不斷收到artistIdArray.length = 0，即使元素有幾個要素「驚動」他們添加到陣列中後。

就像我說的，我不知道如果沒有全局變量或對象甚至是可能的。有任何想法嗎？我完全錯了嗎？

編輯：全功能

function addArtists(artist, request, origElm, xml){ 

//variables 
var artistIdArray = []; 

//create ordered list 
//set new <ol>s class 
var olClass = "artists"; //holds the class of new <ol> 

//create id for new <ol> 
var olId = "artists"; //holds the id of new <ol> 

//create actual <ol> element 
var ol = $('<ol></ol>').attr('id',olId) 
         .addClass(olClass) 
         .appendTo(origElm); 

//create the <li> elements from the returned xml 
//create class for new <li>s, (just the request minus the 's') 
var liClass = request.substring(0, request.length-1); 
//traverse xml 
$('element', xml).each(function(){ 

    //create id for new <li> based on artist abbreviation 
    var artist = $(this).text();   

    $.ajax({ 
    url: "php/artistToAbb.php", 
     data: {artist: artist}, 
     dataType: "html", 
     async: true, 
     success: function(html) { 
    var artistAbb = html; 

     //create li   
    var li = $('<li></li>').attr('id', artistAbb) 
          .addClass(liClass) 
          .appendTo(ol); 

    //create arrow icon/button for li 
    var img = $('<img />').attr('id', artistAbb + 'ArrowImg') 
          .attr("src","images/16-arrow-right.png") 
          .attr('onclick', "expand(this, '" + artistAbb + "', 'years', 'danwoods')") 
          .addClass("expImg") 
          .appendTo(li);  

    var artistTxt = $('<h2>' + artist + '</h2>') 
         .addClass("artist_txt") 
         .attr('onMouseOver', 'catMouseOver(this)') 
         .attr('onMouseOut', 'catMouseOut(this)') 
         .appendTo(li); 

    //tag the ol element's class 
    $($(origElm)[0]).addClass('expanded'); 

    //add this element's id to the array of ids to make it draggable later 
    artistIdArray.push(artistAbb); 
    alert(artistIdArray[artistIdArray.length - 1]); 

    }//end on success  

});//end ajax call 

});//end each(function() 

//make newly added artist elements draggable 
for(var n = 0; n < artistIdArray.length; n++){ 
    //new Draggable(artistIdArray[n], {superghosting: true, detached: true, onEnd: catClearHighlight}); 
    alert(artistIdArray[n]); 
} 
alert(artistIdArray.length); 
} 

Answer 1

修訂：現在你已經張貼整個代碼。答案是，你不應該將元素存儲在臨時數組中，而是在AJAX調用返回時爲每個元素創建可拖動的元素。

問題是，雖然數組可以在AJAX回調中訪問，但是在AJAX調用完成之前，函數結尾處的代碼（每個函數的外部）都會執行，因此數組爲空。如果您在調用返回時創建每個可拖動對象，則不需要中間存儲變量，並且在插入到DOM中時創建可拖動對象。另一種方法是讓您的AJAX調用同步{aSync: false}，但這也可能會阻塞瀏覽器，直到所有元素都返回。更好的是，IMO應該與AJAX調用的異步特性一起生活，並在創建時處理每個元素。

function addArtists(artist, request, origElm, xml){ 

    //create ordered list 
    //set new <ol>s class 
    var olClass = "artists"; //holds the class of new <ol> 

    //create id for new <ol> 
    var olId = "artists"; //holds the id of new <ol> 

    //create actual <ol> element 
    var ol = $('<ol></ol>').attr('id',olId) 
          .addClass(olClass) 
          .appendTo(origElm); 

    //create the <li> elements from the returned xml 
    //create class for new <li>s, (just the request minus the 's') 
    var liClass = request.substring(0, request.length-1); 
    //traverse xml 
    $('element', xml).each(function(){ 

      //create id for new <li> based on artist abbreviation 
      var artist = $(this).text();    

      $.ajax({ 
     url: "php/artistToAbb.php", 
       data: {artist: artist}, 
       dataType: "html", 
       async: true, 
       success: function(html) { 
     var artistAbb = html; 

       //create li     
     var li = $('<li></li>').attr('id', artistAbb) 
           .addClass(liClass) 
           .appendTo(ol); 

     //create arrow icon/button for li 
     var img = $('<img />').attr('id', artistAbb + 'ArrowImg') 
           .attr("src","images/16-arrow-right.png") 
           .attr('onclick', "expand(this, '" + artistAbb + "', 'years', 'danwoods')") 
           .addClass("expImg") 
           .appendTo(li);  

     var artistTxt = $('<h2>' + artist + '</h2>') 
          .addClass("artist_txt") 
          .attr('onMouseOver', 'catMouseOver(this)') 
          .attr('onMouseOut', 'catMouseOut(this)') 
          .appendTo(li); 

     //tag the ol element's class 
     $($(origElm)[0]).addClass('expanded'); 

     new Draggable(artistAbb, {superghosting: true, detached: true, onEnd: catClearHighlight}); 

     }//end on success  

    });//end ajax call 

    });//end each(function() 

} 

Answer 2

您不需要傳遞值，只需直接在內聯函數中引用它們即可。

function addArtists(artist, request, origElm, xml){ 

//variables 
var artistIdArray = new Array(); 
var artistNum = 0; 

/*coding*/ 

//traverse xml 
$('element', xml).each(function(){ 

        /*coding*/ 

    //add this element's id to the array of ids to make it draggable later 
    artistIdArray[artistNum] = "some value"; 
    //alert(artistNum); 
    artistNum++; 

}//end on success  

});//end ajax call 

});//end each(function() 

//test how many elements 
for(var n = 0; n < artistIdArray.length; n++) 
    alert(n); 

} 

Answer 3

我不能發現問題，它可能位於其他地方而不是提供（和編輯）的代碼。

但是，因爲您已經在使用jQuery，請考慮將它們分配爲「全局」jQuery屬性。然後

var artistIdArray = []; 

將

$.artistIdArray = []; 

，並使用它會再看看像

$.artistIdArray.push(artistAbb); 

然後你可以在結束訪問同樣的方式

alert($.artistIdArray.length);