代码以错误的顺序执行

时间:2012-12-15 23:15:55

标签: javascript jquery ajax json function

我知道Javascript是异步的,但在这种情况下我无法理解为什么会发生这种情况。

在下面的第27行,我调用了函数'GetProducer',该函数应该为我后来要使用的特定生产者返回数据。但是,当安慰它时,它会被取消定义,这是因为第28行的代码在检索数据之前执行(第27行)。

为什么会发生这种情况,我该怎么做才能解决它?

1.     function GetProducer(id) {
2.  
3.          $.ajaxSetup ({
4.            url: "http://localhost/api/v1/producers/" + id,
5.            type: "GET",
6.            dataType: "json",
7.            cache: false,
8.            contentType: "application/json"
9.          })
10.         $.ajax({
11.             success: function(data){
12.                 return data;
13.             },
14.             error: function(xmlHttpRequest, textStatus, errorThrown) {
15.                 console.log(xmlHttpRequest);
16.                 console.log(textStatus);
17.                 console.log(errorThrown);
18.            }
19.         }).done(function(data){
20.             console.log(data);
21.         })
22.      }
23.
24.     $('.modal-btn').click(function(){
25.         var producerId = $(this).attr('id');
26.         $('#myModalLabel').html(producerId);
27.         var info = GetProducer(producerId);
28.         console.log(info); // <--- undefined
29.     });

1 个答案:

答案 0 :(得分:5)

ajax回调函数中的return语句是无用的。该函数是异步调用的,您不能指望将任何内容传递给返回值。

如果您将console.log()电话置于“成功”回调中,您会看到一个值。

您可能需要更改“GetProducer”函数,以便它也需要一个回调参数:

    GetProducer(producerId, function(info) { ... });

这个函数或多或少看起来像这样:

  function GetProducer(producerId, callback) {
    $.ajaxSetup({
      // ... same
    });
    $.ajax({
      success: function(data) {
        callback(data);
      },
      // etc
    });
  }

因此,回调函数将放置处理“生产者”信息的代码。异步编程就是在结果可用时提供处理结果的API函数。