鍍金池/ 問答/HTML/ js函數(shù)先后執(zhí)行的問題

js函數(shù)先后執(zhí)行的問題

情境是這樣的，一個(gè)頁面有評價(jià)模塊，詳情模塊，以及圖片模塊，后臺分別設(shè)置了對應(yīng)的三個(gè)接口，因?yàn)檎麄€(gè)頁面都是從詳情模塊建立dom模板的，也就是說圖片和評價(jià)后臺各會(huì)返回一個(gè)數(shù)據(jù)，需要我填充到詳情模塊里去，有沒有辦法讓我先調(diào)用了評價(jià)的ajax方法再調(diào)用圖片的ajax，最后再將里面重要的兩個(gè)數(shù)據(jù)，一起匯總到核心模塊詳情里？有沒辦法讓前兩個(gè)函數(shù)先執(zhí)行得到我要的結(jié)果再繼續(xù)最后一個(gè)函數(shù)呢？
我是這么寫的：
這種方法可以保證getPic,getEva先執(zhí)行嗎？？？

function getDetali(){  //獲取詳情的信息
getPic()//圖片函數(shù)，返回一個(gè)圖片數(shù)組
getEva()//評價(jià)函數(shù)，返回評價(jià)等級
if(xxxxx){
   showDetail() //顯示整個(gè)界面
}
}
回答
編輯回答
安于心

clipboard.png
類似這樣算不算是回調(diào)函數(shù)呢？有一部分沒截圖就是頁面加載之初就調(diào)用了getDeatil(getEvaluation)

2018年7月20日 09:31
編輯回答
別硬撐

promise

2017年11月9日 23:00
編輯回答
柚稚

回調(diào):

function getDetali(){ 
    getPic(function(d1) {
        getEva(fucntion(d2) {
            if(d1 && d2) {
               showDetail(d2)      
            }
        })  
    }) 
}

function getPic(cb) {
    ajax({
        success(d){
            if(cb) cb(d)
        }
    })
}
function getEva(cb) {
    ajax({
            success(d){
                if(cb) cb(d)
            }
        })
}
function showDetail (cb) {
    ajax({
        success(d){
            if(cb) cb(d)
        }
    })
}

promise：


function getDetali(){ 
    getPic().then(getEva).then(showDetail)
}


function getPic() {
    return new Promise((reslove, reject) => {
        ajax({
            success(d){
                if(d) reslove(d)
            }
        })  
    })
}
function getEva() {
    return new Promise((reslove, reject) => {
        ajax({
            success(d){
                if(d) reslove(d)
            }
        })  
    })
}
function showDetail () {
    return new Promise((reslove, reject) => {
        ajax({
            success(d){
                if(d) reslove(d)
            }
        })  
    })
}

async/await:

    async(()=>{
        const d1 = await getPic()
        const d2 = await getEva()
        if(d1 && d2){
            showDetail()
        }
    })
2017年4月27日 17:47