Javascript синхронного поток, когда есть вызов асинхронной функции

Question

Я провел весь день читать о JQuery отсроченного, обещание и т.д.

Моей проблема очень проста.

У меня есть одна функция, которая вызывает еще 4 функции, а некоторые из них имеют асинхронные вызовы для извлечения данных с сервера.

function A() { 
    async call 
    console.log("1"); 
} 

function B() { 
    normal code 
    console.log("2"); 
} 

function C() { 
    async call 
    console.log("3"); 
} 

function xyz() { 
    A(); 
    B(); 
    C(); 
    print str; 
} 

ожидаемый результат 123str.

вместо этого я получаю 312 или 213. В принципе, 3 функции не ждут конца другого. Я пробовал с .done с $ .when (a). Then (b), с обещанием.

Но ничего не работает. Может ли кто-нибудь дать мне простой пример кода, который работает?

EDIT:

function setId() { 

var doc = sessionStorage.getItem("urlDoc"); 
var user = sessionStorage.getItem("LoggedUser"); 
var string = "urlDoc=" + doc + "&user=" + user; 
if (sessionStorage.getItem("countId") === null) { 
    $.ajax({ 
     type: 'POST', 
     url: 'php/findTemporaryId.php', 
     data: string, 
     success: function (data) { 
      sessionStorage.setItem("countId", data); 
      countId = sessionStorage.getItem("countId"); 
      id = countId; 
      console.log("1"); 

     }, 
     error: function() { 
      alert("Server Error"); 
     } 
    }); 
} else { 
    sessionStorage.setItem("countId", parseInt(sessionStorage.getItem("countId")) + 1); 
    countId = sessionStorage.getItem("countId"); 
    id = countId; 
    console.log("1"); 

} 

затем

function setAuthor() { 
    author = sessionStorage.getItem('LoggedUser'); 
    console.log("2"); 

} 

затем

function getData() { 
    $.ajax({ 
    type: 'POST', 
    url: 'php/date.php', 
    success: function (data) { 
     date = data; 
     console.log("3"); 
    }, 
    error: function() { 
     alert("Error"); 
    } 
}); 
} 

это, как я называю их

function saveSelectionFragment() { 

     setId(); 
     setAuthor(); 
     getData(); 
} 

здесь консоль firebug. http://i.imgur.com/zQ0Mk4E.jpg

Answer 1

Так как вы ничего не публикуйте вы сказали, что вы пытались с Promises, вот как это работает ..

function A() { 
 
    return new Promise(function(done) { 
 
    // emulate async call with setTimeout 
 
    setTimeout(function() { 
 
     console.log("1"); 
 
     done(); 
 
    }, 100); 
 
    }); 
 
} 
 

 
function B() { 
 
    return new Promise(function(done) { 
 
    // "normal" code 
 
    console.log("2"); 
 
    done(); 
 
    }); 
 
} 
 

 
function C() { 
 
    return new Promise(function(done) { 
 
    // emulate async call with setTimeout 
 
    setTimeout(function() { 
 
     console.log("3"); 
 
     done(); 
 
    }, 100); 
 
    }); 
 
} 
 

 
function xyz() { 
 
    A() 
 
    .then(B) 
 
    .then(C) 
 
    .then(function() { 
 
     // whatever this is supposed to be 
 
     //print str; 
 
     // maybe you meant.. 
 
     console.log('str'); 
 
    }); 
 
} 
 

 
xyz();

Answer 2

returnPromise из JQuery обещание объекта из функции. Используйте .then() для обмена обещаниями или функциями, которые возвращают объект обещания.

function A() { 
 
    return $.Deferred(function(dfd) { 
 
    setTimeout(function() { 
 
     dfd.resolve("1") 
 
    }, Math.floor(Math.random() * 2500)) 
 
    }) 
 
    .then(function(result) { 
 
    console.log(result); 
 
    return result 
 
    }); 
 
} 
 

 
function B() { 
 
    var value = "2"; 
 
    console.log(value); 
 
    return value 
 
} 
 

 
function C() { 
 
    return $.Deferred(function(dfd) { 
 
    setTimeout(function() { 
 
     dfd.resolve("3") 
 
    }, Math.floor(Math.random() * 2500)) 
 
    }) 
 
    .then(function(result) { 
 
    console.log(result); 
 
    return result 
 
    }); 
 
} 
 

 
function xyz(results) { 
 
    return A() 
 
    .then(function(data) { 
 
    results.push(data); 
 
    return B() 
 
    }) 
 
    .then(function(data) { 
 
    var value = "3"; 
 
    results.push(data); 
 
    return C() 
 
    }) 
 
    .then(function(data) { 
 
    var value = "str"; 
 
    results.push(data, value); 
 
    console.log(value); 
 
    return results 
 
    }) 
 
} 
 

 
xyz([]) 
 
.then(function(results) { 
 
    console.log("complete:", results); 
 
}) 
 
.fail(function(err) { 
 
    console.log(err); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script>

Answer 3

$(".button").click(function(){ 
 
    a(function(){ 
 
    b(function(){ 
 
     c(function(){ 
 
     d(function(){ 
 
     
 
     }); 
 
     }); 
 
    }); 
 
    }); 
 
}); 
 
function a(callback){ 
 
    console.log("1"); 
 
    callback(); 
 
} 
 

 
function b(callback){ 
 
console.log("2"); 
 
    callback(); 
 
} 
 

 
function c(callback){ 
 
console.log("3"); 
 
    callback(); 
 
} 
 

 
function d(callback){ 
 
console.log("4"); 
 
    callback(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<button class="button" >ClickToCall</button>

Может быть, вы должны попробовать обратный вызов со всей функции. Когда нам нужно управлять этим типом процесса. Я всегда использую callback для управления полным процессом. в функциях a, b, c, d вы можете поместить ajax-вызов, а при успешном выполнении ajax вам необходимо передать функцию callback().

Позвольте мне знать, если вам нужна дополнительная информация по этому

Answer 4

В Chrome и Firefox Developer Edition теперь вы можете использовать async/await.Прямо вперед:

var wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
 

 
async function A() { 
 
    await wait(100); 
 
    console.log("1"); 
 
} 
 

 
function B() { 
 
    console.log("2"); 
 
} 
 

 
async function C() { 
 
    await wait(100); 
 
    console.log("3"); 
 
} 
 

 
async function xyz() { 
 
    await A(); 
 
    B(); 
 
    await C(); 
 
    console.log("Done."); 
 
} 
 

 
xyz();

Он по-прежнему с помощью обещаний, но вряд ли можно сказать.