調用JavaScript函數在

訂單

我試圖用一個按鈕來執行API調用到Flickr，就像這樣：調用JavaScript函數在

$(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調用完成後，wh ich擊敗目的。

$(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」 & 「numResults2」都是全球性的。

來源

2013-10-01 badgercore

爲什麼你的API調用掛？不是同步的嗎？ – Bergi

其實你的函數的順序應該在執行時受到尊重。你可能會發布完整的源代碼嗎？ – Moeri

你可以發佈'makeAPICall'嗎？ –

如果makeAPICall不是異步 - 稱它爲出界：

 workingNotice(); 
    setTimeout(makeAPICall, 1);

來源

2013-10-01 20:19:15

完美運作。現在我要去查看setTimeout（）並找出它的工作原理！ – badgercore

調用JavaScript函數在

回答

相關問題