从函数返回的访问数组 - javascript/jquery noob moment

Question

当表单被提交时，我正在调用一个函数 getPosts 并传递一个变量 str。我想做的是获取从该函数返回的数据。

 // when the form is submitted
 $('form#getSome').submit(function(){
  var str = $("form#getSome").serialize();
  var something = getPosts(str);

  * This is where I'd like to get the data returned from getPosts()

  return false;
 });

 // get the data
    function getPosts(str){

        $.getJSON('http://myurl.com/json?'+str+'&callback=?',
          function(data) {

             arrPosts = new Array();

              $.each(data.posts, function(i,posts){

                // build array here

              });

              return arrPosts;

          });
    };

我尝试了很多东西，但只返回了“未定义”。我试过 console.log(something);, console.log(getPosts)。

我在这里遗漏了一些非常基本的东西。任何帮助将不胜感激。

编辑：

我想做的是创建一个可以获取帖子的函数。然后不同的事件会调用该函数。然后我可以使用这些数据。因此，一个事件可能是提交表单，另一个事件可能是单击链接，另一个是懒惰/无休止的滚动。所有人都可以使用相同的 getPosts 函数。

需要大量解析结果，这相当于很多行代码。只是想找到一种方法来重用该功能。你认为这可能吗？

$('a.thisLink').click(function(){
    getPosts();
    get the return from getPosts() and do something with it
});

$('form.thisForm').submit(function(){
    getPosts();
    get the return from getPosts() and do something with it
});

function getPosts(){
   get the posts and return an array
}

Answer 1

Ajax 请求是异步执行的，getJSON 的回调函数（function (data)）在请求结束时执行，在回调中返回一个值没有任何作用，因为 getPosts 内部是一个嵌套函数，它的返回值是 never用过。

实际上，在您的示例中，getPosts 不会返回任何内容，它会在返回数据之前结束其执行。

我建议你在提交事件处理程序上工作，如果你想保留 getPosts 函数，你可以引入一个回调参数：

$('form#getSome').submit(function(){
  var str = $("form#getSome").serialize();

  getPosts(str, function (data) {
    var array = [];
    $.each(data.posts, function(i,posts){
      // build array here
      array.push(/* value to add */);
    });
    // array ready to work with...
    //...
  });
  return false;
});

function getPosts(str, callback){
  $.getJSON('http://myurl.com/json?'+str+'&callback=?', callback);
}

---

编辑2：针对您的第二条评论，您可以进行另一个回调，该回调将在第一个回调处理完数据时执行，您可以在执行时定义它提交事件处理程序上的 getPosts 函数：

$('form#getSome').submit(function(){
  var str = $("form#getSome").serialize();

  getPosts(str, reusableCallback, function (result) {
    // result contains the returned value of 'reusableCallback' <---
  });
  return false;
});

function reusableCallback(data) {
  var array = [];
  $.each(data.posts, function(i,posts){
    array.push(/* value to add */);
  });
  //...
  return array;
}

function getPosts(str, callback, finishCallback){
  $.getJSON('http://myurl.com/json?'+str+'&callback=?', function (data) {
    finishCallback(callback(data)); // pass the returned value
                                    // of callback, to 'finishCallback' which is
                                    // anonymously defined on the submit handler
  });
}

---

编辑3：我认为getPosts函数和“reusableCallback”函数有很强的相关性，你可能想加入它们，让代码更易于使用和理解：

$('form#getSome').submit(function(){
  var str = $("form#getSome").serialize();

  getPosts(str, function (result) {
    // result contains the processed results
  });

  return false;
});


function getPosts(str, finishCallback){
  $.getJSON('http://myurl.com/json?'+str+'&callback=?', function (data) {
    // process the results here
    var array = [];
    $.each(data.posts, function(i,posts){
      array.push(/* value to add */);
    });
    //...
    finishCallback(array); // when the array is ready, execute the callback 
  });
}

Answer 2

您的 getPosts 函数看起来不完整，我不是 jquery 专家，但它应该看起来像：

function getPosts(str) {

  $.getJSON('http://myexample.com/json?'+str+'&callback=?',function(data){

    var arrPosts = [];

    $.each(data.posts, function(i,posts){
     ... build array yada yada ...
    });

    return arrPosts;

  });
}

Answer 3

问题是 $.getJSON 回调函数在 get 请求返回数据时被调用，而不是与您的函数内联。