Javascript同步流程當有異步函數調用時

我花了整整一天的時間閱讀關於jquery延期，promise等內容Javascript同步流程當有異步函數調用時

我的問題其實很簡單。

我有一個函數調用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個功能不等待另一個的結束。（a）。然後（b），並且承諾。

但沒有什麼工作。有人能給我一個可用的準系統示例代碼嗎？

編輯：

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

這裏的螢火蟲控制檯。 http://i.imgur.com/zQ0Mk4E.jpg

來源

2016-12-27 Matteo Raizer Fanciulli

發佈異步調用和正常代碼 – bugwheels94

您調用A（）並立即調用B（）。需要進行回調或返回一個承諾，一旦該承諾完成（或稱爲回調），您需要調用B，然後調用C（與A相同） – yBrodsky

相同的僞代碼：'A（）。then （function（）{B（）; return C（）;}）。then（function（）{print str;}）;'。假設'A'和'C'返回承諾。 –

既然你沒有張貼任何你說你試圖用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();

來源

2016-12-27 20:22:07

非常感謝。 –

return從功能jQuery的Promise的承諾目標。使用.then()來鏈接返回promise對象的promise或函數。

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>

來源

2016-12-27 20:24:29 guest271314

$(".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>

可能是你需要嘗試了所有功能的回調。當我們需要管理這種類型的過程。我總是使用回調來管理完整的過程。在函數a，b，c，d中，您可以放入ajax調用，並在成功調用ajax時需要傳遞callback（）函數。

讓我知道你是否需要對此

來源

2016-12-27 20:25:35

在您現在可以使用async/await Chrome和Firefox開發版的更多信息。直截了當：

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();

它仍然使用的承諾，但你也很難分辨。

來源

2016-12-27 21:29:28 jib

Javascript同步流程當有異步函數調用時

回答

相關問題