javascript数组引用和回调函数

Question

我不明白的东西我觉得解释起来很长，所以请多多包涵。我的页面中有以下包含 js：

var include = (function(){
    var exports = {}
    var test = function(url){
        var result = [];
        $.ajax(url).then(function(data){
            result = data.form.records;  // assume data.form.records valid
            console.log(result) // displays correctly Array [Object,Object] 
        });
        return result;
    }
    exports.test = test;
    return exports
})();

然后从页面中我进行以下调用（假设 some_url 是有效的）

var array = include.test(some_url);

稍后我有一个事件（一些按钮点击）将使用数组中的值

input.on('click',function(){
   console.log(array) // 2
});

我的问题是，当事件发生时，数组变量仍然是 VOID ， console.log // 2 显示 Array [ ]....

我知道我的测试函数立即返回，所以数组变量的立即值为 Array []，但是当 input.click 被调用时，then() 回调已经被执行，所以数组本身应该被修改.毕竟数组是一个引用...

有什么建议吗？我通常不问问题，因为大多数时候我通过搜索找到答案，但我已经尝试了一天。也许我缺乏灵感。一些帮助将不胜感激

Answer 1

array 指的是一个空数组，但在 ajax 回调中你有 result = data.form.records; 它将一个新数组分配给 result 而不是更新 array 引用的数组，这就是为什么即使在控制台之后记录result 数组的正确值是指初始空数组。

var include = (function() {
  var exports = {}
  var test = function(url) {
    var result = [];
    $.ajax(url).then(function(data) {
      result.length = 0;//remove existing items from the array
      result.push.apply(result, data.form.records);//copy the items from the records to the result array instead of assigning a new value
      console.log(result) // displays correctly Array [Object,Object] 
    });
    return result;
  }
  exports.test = test;
  return exports
})();