Question

我正在尝试使用按钮来执行对Flickr的API调用，如下所示：

$(document).ready(function (){
    $('#goButton').click(function (){
         makeAPICall();
    });
});

这可以按预期工作，但客户端和Flickr API之间的通信需要一段时间才能执行，因此页面看起来像是挂起的。我想在按钮点击时立即显示“工作通知”，让用户知道他们的操作正在处理中。

为此，我添加了一个H1标签：

<h1 id="notice"></h1>

和一个更改内部HTML以显示通知的函数：

function workingNotice() {
    document.getElementById("notice").innerHTML="I am getting your results";
}

但是当我尝试将按钮的代码编辑成这样的东西时：

$(document).ready(function (){
    $('#goButton').click(function (){
         workingNotice();
         makeAPICall();
    });
})

在API调用完成之前，工作通知永远不会显示，这会使目的失败。

然后我尝试使用：

$(document).ready(function (){
    $('#goButton').click(function (){
         $.when(
             workingNotice()
         ).then(
             makeAPICall()
         );
    });
})

这给出了完全相同的结果，其中在API调用完成之前不会调用工作通知。有没有其他方法我可以尝试强制遵守这些功能的顺序？

UPDATE /编辑：

虽然我在另一个答案中找到了初始问题的解决方案，但我知道API调用处理的延迟是由于此函数中的某些错误而导致的。以下是makeAPICall的代码：

//call Flickr api and look for tags matching user search term
function makeAPICall(){

//get value tag from team 1 search box
var searchTag1 = escape(document.getElementById("searchTag1").value);
//get value tag from team 2 search box
var searchTag2 = escape(document.getElementById("searchTag2").value);

//build api call url with searchTag1
var url1 = "http://api.flickr.com/services/rest/?" 
            + "method=flickr.photos.search&api_key=XXX&tags=" 
        + searchTag1 + "&sort=interestingness-desc" 
                + "&safe_search=1&has_geo=1&format=json&nojsoncallback=1";
//build api call url with searchTag1
var url2 = "http://api.flickr.com/services/rest/?"
                + "method=flickr.photos.search&api_key=XXX&tags=" 
        + searchTag2 + "&sort=interestingness-desc"
                + "&safe_search=1&has_geo=1&format=json&nojsoncallback=1";

//make call to flickr api
$.when(
    $.ajax({
      dataType: "json",
      url: url1,
      async: false,
      success : function(callReturn1) {
        callData1 = callReturn1;
        numResults1 = parseInt(callData1.photos.total);
      }
    }),
    $.ajax({
      dataType: "json",
      url: url2,
      async: false,
      success : function(callReturn2) {
        callData2 = callReturn2;
        numResults2 = parseInt(callData2.photos.total);
      }
    })
).then(
    drawChart()
);

}

注意“callData1”，“callData2”，“numResults1”＆amp; “numResults2”都是全球性的。

Answer 1

如果您的makeAPICall不是异步 - 请将其命名为超出范围：

     workingNotice();
     setTimeout(makeAPICall, 1);

按顺序调用Javascript函数

1 个答案: