jQuery的执行顺序

Question

考虑下面的代码：

function searchText() { 
    if($('#searchtext').val() == null || $('#searchtext').val().trim() == '') { 
     alert('must provide a text to search for'); 
    return false; 
    } 

    urllink='http://search.twitter.com/search.json?q=' + escape($('#searchtext').val().trim()) + '&callback=?'; 
    $('#results').html(urllink); 

    $.getJSON(urllink,function(data) { 
     var resultT = {}; 
     $('#results').html(data.results[0].profile_image_url); 

     return data.results; 
    }); 
} 

$('#gosearch').click(function() { 
    var data = searchText(); 
    if(data == null) 
     alert('null'); 

    return false; 
}); 

我有萤火断点在searchText()return data.results。但似乎searchText被执行，但我不停止在我的突破点。它宁可检查数据，它是null，并执行alert('null')。那么它会在searchText的折扣点停止。

这是怎么发生的？我不能在事件中执行函数并等待它们完成，然后再移动到代码中的下一行？

感谢

Answer 1

你没有意识到AJAX是一个同步。所以当searchText()返回ajax请求尚未完成。您需要传递回调并执行该操作，而不是执行return data.results;。

下面是一个例子：

function searchText(callback) { 
    if ($('#searchtext').val() == null || $('#searchtext').val().trim() == '') { 
     alert('must provide a text to search for'); 
     return false; 
    } 

    urllink = 'http://search.twitter.com/search.json?q=' + escape($('#searchtext').val().trim()) + '&callback=?'; 
    $('#results').html(urllink); 

    $.getJSON(urllink, function (data) { 
     var resultT = {}; 
     $('#results').html(data.results[0].profile_image_url); 

     callback(data.results); 
    }); 
} 

$('#gosearch').click(function(e) { 
    e.preventDefault(); 
    searchText(function(data) { 
     if (data == null) alert('null'); 
     // do something with your data 
    }); 
}); 

Answer 2

要以异步方式从urllink获取数据，并在返回data.result所在的函数是一个回调函数，当调用URL完成将被调用。

后续代码不会等待异步调用完成。