javascript - call multiple functions successively - Stack Overflow

admin管理员组

文章数量:1426051

I know this question has been asked several times, however I can't seem to get the solutions to work with my code: Wait till a Function with animations is finished until running another Function, jquery wait for multiple plete events, Wait for the end of TWO asynchrounous functions before firing a third (jQuery Deferred ?)

Basically, I would like to call four functions successively:

#1
function getJason() {
 $.getJSON(rgUrl1,function(json1){
   rgJson1 = json1; ...etc.
 });      


#2
function bineJason() {
  //code to bine 
});


#3
function divideArray() {
  //code to divide stuff 
});


#4
function doOtherStuff() {
  //code to do some other stuff
});

I need #1 to finish before calling #2, #2 to finish before #3, and #3 to finish before #4. Past posts have led me to believe that I should use deferrds and promises. I've read through the documentation / and have experimented with examples without success:

function testing() {

 var deferredObj = $.Deferred();
 var test = getJson()
 var function1 = function () {

  test.done(function(){

    deferredObj.resolve();

    return deferredObj;
   });

  }

  deferredObj.done(function(){
   bineJson();
 });
}; 

Furthermore, most of the examples deal with two functions, whereas I need to call several. I've also noticed that some responses incorporate "setTimeout". I'm a bit leery, perhaps unnecessarily, about using anything with a timer or pause or delay. Wouldn't I then have to guess how long the function will take. What about if one user's puter/connection is slower or something?

I know this question has been asked several times, however I can't seem to get the solutions to work with my code: Wait till a Function with animations is finished until running another Function, jquery wait for multiple plete events, Wait for the end of TWO asynchrounous functions before firing a third (jQuery Deferred ?)

Basically, I would like to call four functions successively:

#1
function getJason() {
 $.getJSON(rgUrl1,function(json1){
   rgJson1 = json1; ...etc.
 });      


#2
function bineJason() {
  //code to bine 
});


#3
function divideArray() {
  //code to divide stuff 
});


#4
function doOtherStuff() {
  //code to do some other stuff
});

I need #1 to finish before calling #2, #2 to finish before #3, and #3 to finish before #4. Past posts have led me to believe that I should use deferrds and promises. I've read through the documentation http://api.jquery./category/deferred-object/ and have experimented with examples without success:

function testing() {

 var deferredObj = $.Deferred();
 var test = getJson()
 var function1 = function () {

  test.done(function(){

    deferredObj.resolve();

    return deferredObj;
   });

  }

  deferredObj.done(function(){
   bineJson();
 });
}; 

Furthermore, most of the examples deal with two functions, whereas I need to call several. I've also noticed that some responses incorporate "setTimeout". I'm a bit leery, perhaps unnecessarily, about using anything with a timer or pause or delay. Wouldn't I then have to guess how long the function will take. What about if one user's puter/connection is slower or something?

• javascript
• jquery
• function

Share Improve this question Follow edited May 23, 2017 at 12:20 CommunityBot 111 silver badge asked Dec 20, 2014 at 18:58 user3080392user3080392 1,24455 gold badges1919 silver badges3737 bronze badges 9

• I would be inclined to use something link WatchJS ... github./melanke/Watch.JS (look into Promises). – rfornal Commented Dec 20, 2014 at 19:01
• Have you taken a glance at Promises? – Anthony Forloney Commented Dec 20, 2014 at 19:02
• getJason() is clearly asynchronous. The big question to ask yourself is whether bineJason(), divideArray() and doOtherStuff() are asynchronous or synchronous? – Roamer-1888 Commented Dec 20, 2014 at 19:06
• 1st: you're right, using timeouts is not an option! I find your question a bit unclear how the four functions should be called; where the input data es from and and where the output data goes to. But since you've mentioned that you've looked at Deferreds already let me point you to the sentence in the docs stating "[...] Since deferred.done() returns the deferred object, other methods of the deferred object can be chained to this one, including additional .done() methods. [...]" – try-catch-finally Commented Dec 20, 2014 at 19:06
• Not that article specifically, however I did read blog.mediumequalsmessage./… and joseoncode./2011/09/26/… I was still somewhat confused afterwards. I tried piecing together their info and responses from previous posts, but no success. – user3080392 Commented Dec 20, 2014 at 19:06

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 3

jQuery's ajax functions already return a promise. So you do not need to create new deferred objects if you are using jquery's ajax functions.

To get your functions called in succession: call the .then method for however many functions you need to call. If one or more of your functions need to do some async task then just return a promise, the deferred object will wait to call the next then callback till the returned promise resolves. Each then callback will get passed the data returned in the previous then (or in the case of returned promise the resolved data)

$.getJSON(rgUrl1,function(json1){
   rgJson1 = json1; ...etc.
}).then(bineJason)
.then(divideArray)
.then(doOtherStuff);      

//#2
function bineJason(someData) {
  //code to bine 
  return $.getJSON("url to some other json endpoint");
}

//#3
function divideArray(someData) {
  //code to divide stuff 
  //this function is sync so just return some data
  return someNewData;
}

//#4
function doOtherStuff(someData) {
  //code to do some other stuff
  //this function is async so return a promise;
  return $.getJSON("url to some other json endpoint");
}

JSFiddle Demostrating mixed async/sync succession

To call them successively is quite easy, you don't need to wait for multiple async things but only for the previous one each.

You'd do

function getJason() {
    return $.getJSON(rgUrl1);
}
function bineJason(json1) {
    //code to bine 
}
function divideArray() {
    //code to divide stuff 
}
function doOtherStuff() {
    //code to do some other stuff
}

getJason().then(bineJason).then(divideArray).then(doOtherStuff);

which would be very similar to

doOtherStuff(divideArray(bineJason(getJason())));

only that it takes care to defer the putation (as a callback) if one result is asynchronous (in here, the $.getJSON in getJason).

本文标签： javascriptcall multiple functions successivelyStack Overflow