如何按順序運行異步Javascript函數

嗨，我是一名初學者程序員，我需要在頁面上按順序運行幾個javascript函數; getcampaignID()，search1(),searchresult(),search2(),searchresult()。我需要首先檢索廣告系列ID，然後將其發送到search1()，獲取結果，然後運行search2()以獲得下一個結果。
我已成功地由該</body>標籤和在searchresult()添加的setTimeout之後執行search1()跑[search1() + searchresult()] [search2() + searchresult()]之前。 但是，我無法運行getcampaignID第一沒有打破search1()和search2()如何按順序運行異步Javascript函數

我的代碼如下所示：home.html的

<script> 
getcampaignID() { 
    //...make AJAX call to get campaignID 
    campaignID = xmlhttp.responseText.trim(); 
} 
getcampaignID(); //run function 

searchresult() { 
     //...retrieves search results 
     //...appends to html div 

     setTimeout(function() { 
      if (counter == 0) { 
       counter = 1; 
       search2(); 
      } else { 
       clearTimeout(timer); 
      } 
     }, 500); 
    } //end of searchresults 

search1() { 
    //...search1 parameters 
    //url=?camid = campaignID 
    //campaignID unidentified 
} 

search2() { 
    //...search2 parameters 
    //url=?camid = campaignID 
    //campaignID unidentified 
} 


</script> 
<body> 
<div id= results1>...</div> 
<div id= results2>...</div> 
</body> 
<script> 
     search1(); 
</script>

事情我已經嘗試：

 getcampaignID() { 
      //... all the codes mentioned 
      search1() { 
       alert("search1 working"); 
      } 
      search2() { 
       alert("search2 working"); 
      } 
     } 
     search1();

問題： search1（）不會運行，不會觸發警報。

getcampaignID() { 
    var campaignid = "A"; 
    big(campaignid); 
} 
big 
function (campaignid) { 

    //..all codes 
    search1() { 
     alert("search1 working"); 
    } 
    search2() { 
     alert("search2 working"); 
    } 
    search1(); 
} 
search1();

問題：search1（）不會運行，不會觸發警報。

摘要：
我正在尋找一種方式search1();搜索1之前添加CAMPAIGNID值運行

來源

2016-12-05 Detective merry

你忽略了最有趣的代碼。 – Pointy

作爲自定義函數，你可以給它們參數。在你聲明'function search1（）{...}'的地方，並且在括號中使用一個參數'function search1（ID）{...};'。當你運行它時，只需執行'search1（campaignid）;'並且它會將參數作爲ID傳遞，你可以在你的函數中使用它。 – yomisimie

嘿，代碼充滿了易趣api條款，所以我盡我所能不要使用它們！我只是試過了'search1（campaign）{...}'和'search1（campaignid）'這兩個版本，並且它不起作用我認爲這是因爲在我從Ajax調用中獲得campaignID之前就運行了這個函數 –

所以有一些可能性：

巢的功能。在search1（）的回調中運行search2（）。
使用jQuery和.defer（）;
瞭解的承諾，做同樣爲2，但沒有jQuery的:)

來源

2016-12-05 15:25:26 campino2k

你需要的是ES6承諾。使用Promises，你可以使用.then（）方法將它們鏈接起來，並且一個接一個地運行它們並處理鏈中的結果。

使用的承諾，你可以編寫類似

Promise.resolve().then(
    search1(); 
).then(
    doSomethingWithResults(results); 
).then(
    // .... 
);

你能找到一個很好的介紹，在這裏承諾：https://davidwalsh.name/promises

來源

2016-12-05 15:25:59 ZedXter

爲了跨瀏覽器兼容，請使用Promise polyfill/library，例如https://github.com/petkaantonov/bluebird bluebird或q。 – SethWhite

你可以實現你與Promises問。他們可以採取一點習慣，但一旦你掌握了它，它就會使異步控制流程非常簡單。

如果您使用的庫來執行你的AJAX請求，對返回自己的承諾像Fetch，你可以寫你這樣的代碼：

//Fetch will return a promise the resolves with a value of your campaign ID 
fetch('http://endpoint.com/campaign') 
    .then(campaignId => { 
     //You can pass that ID to each of your searches. 
     //Promise.all will resolve with an array containing results from each function you passed in, in that order. 
     return Promise.all([search1(campaignId), search2(campaignId)]); 
    }) 
    .then(results => { 
     //Search 1 was the first promise we passed to Promise.all 
     let search1Results = results[0]; 
     //Search 2 was the second promise we passed to Promise.all 
     let search2Results = results[1]; 

     //process the results 
    });

來源

2016-12-05 15:48:08 BubbleHulk

如何按順序運行異步Javascript函數

回答

相關問題