So führen Sie asynchrone Javascript-Funktionen in der Reihenfolge

Hi Ich bin ein Anfänger Programmierer und ich muss mehrere Javascript-Funktionen in einer Reihenfolge auf einer Seite ausführen; getcampaignID(), search1(), searchresult(), search2(), searchresult(). Ich muss die Kampagnen-ID zuerst abrufen, um sie an search1() zu senden, das Ergebnis zu erhalten und dann search2() auszuführen, um das Ergebnis als nächstes zu erhalten.
Ich habe lief erfolgreich [search1() + searchresult()] vor [search2() + searchresult()] durch die search1() nach dem </body> Tag und Ausführen eines SetTimeout in searchresult() hinzufügen. Aber ich bin nicht in der Lage getcampaignID laufen zunächst ohne search1() und search2() zu brechenSo führen Sie asynchrone Javascript-Funktionen in der Reihenfolge

Mein Code sieht wie folgt aus: 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>

Dinge, die ich versucht habe:

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

Problem: search1() wird nicht ausgeführt, keine Warnungen ausgelöst.

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

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

Problem: search1() wird nicht ausgeführt, keine Warnungen ausgelöst.

Zusammenfassung:
ich nach einem Weg suchen CampaignId Wert in search1(); vor search1 hinzufügen läuft

Quelle

2016-12-05 Detective merry

Sie haben links meisten interessanten Code aus. – Pointy

Als benutzerdefinierte Funktionen können Sie ihnen Argumente geben. Wo Sie 'function search1() {...}' und in den runden Klammern ein Argument 'function search1 (ID) {...};'.Wenn Sie es ausführen, tun Sie einfach 'search1 (campaignid);' und es wird das Argument als ID übergeben und Sie können es in Ihrer Funktion verwenden. – yomisimie

hey, der code ist voll mit ebay api begriffen, also versuche ich mein bestes, sie nicht zu benutzen! Ich habe gerade die Editionen 'search1 (Kampagne) {...}' und 'search1 (campaignid) ausprobiert;' und es hat nicht funktioniert. Ich denke, das liegt daran, dass die Funktion ausgeführt wird, bevor ich die Kampagnen-ID von meinem Ajax-Anruf –

So gibt es einige Möglichkeiten:

Nest Funktionen. Führen Sie search2() im Callback von search1() aus.
Verwenden Sie jQuery und .defer();
über Versprechungen lernen und tun gleiche wie 2., aber ohne jQuery :)

Quelle

2016-12-05 15:25:26 campino2k

Was Sie brauchen ES6 Promises ist. Mithilfe von Promises können Sie sie mithilfe der .then() -Methode verketten und nacheinander ausführen und die Ergebnisse in der Kette verarbeiten.

Versprechen Mit Ihnen so etwas wie

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

schreiben könnte Sie eine gute Einführung in Promises hier finden konnten: https://davidwalsh.name/promises

Quelle

2016-12-05 15:25:59 ZedXter

bekomme Verwenden Sie für Kompatibilität zwischen Browsern eine Promise-Polyfill/Bibliothek, wie https://github.com/petkaantonov/bluebird bluebird oder q. – SethWhite

Sie erreichen, was Sie mit Promises fragen. Sie können ein wenig gewöhnungsbedürftig sein, aber sobald Sie die Hand davon bekommen, macht es den asynchronen Kontrollfluss, mit dem Sie Probleme haben, wirklich einfach.

Wenn Sie eine Bibliothek verwendet, um Ihre AJAX-Anforderungen zu erfüllen, dass zurückgegeben ein Versprechen selbst wie Fetch, können Sie Ihren Code wie folgt schreiben könnte:

//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 
    });

Quelle

2016-12-05 15:48:08 BubbleHulk

So führen Sie asynchrone Javascript-Funktionen in der Reihenfolge

Antwort

Verwandte Themen