如何在onclick事件中一個接一個地調用兩個javascript函數

Question

我有一個超鏈接的圖像，單擊圖像應調用一個名為downloadReport()的javascript函數，如下所示，

<a href="#" title="Export" target="self"><img onclick="downloadReport()" align="right" id="exportFile" src='<c:url value="resources/img/excel_download.jpg"/>'></a>

同樣，此函數中還包含兩個其他函數。

function downloadReport() {
    upload();
    download();

}
function upload(){
    from = getFrom();
    to =getTo();
    all = getAll();
    approved =getApproved();
    rejected = getRejected();
    pending = getPending();

    _("multiphase").method = "get";
    _("multiphase").action = "/curation/export";
    _("multiphase").submit();


}
function download(){
    _("multiphase").method = "get";
    _("multiphase").action = "/curation/download";
    _("multiphase").submit();

    }

這段代碼的問題是，在上傳之前調用了第二個函數download（），如何等待完成上傳功能然后調用下載功能？ 因為我是javascript的初學者，並且也沒有太多有關Ajax或JQuery的信息。

Answer 1

您可以通過ajax發布ajax調用第一個方法upload（），然后在ajax成功響應的基礎上調用第二個方法。

Answer 2

它看起來應該像這樣：

function downloadReport() {
    upload().then(function() {
         download().then(function() {
             // do other stuff when all finished
         });
    });
}

function upload(){
    return $.Deferred(function(def) {
        from = getFrom();
        to = getTo();
        all = getAll();
        approved = getApproved();
        rejected = getRejected();
        pending = getPending();

        _("multiphase").method = "get";
        _("multiphase").action = "/curation/export";
        // _("multiphase").submit(); should have some sort of callback if it's async. Maybe it already returns a promise?!
        _("multiphase").submit(function(){ def.resolve(); });
        // the function(){ def.resolve(); } should represent the submit callback 
    });
}

function download() {
    return $.Deferred(function(def) {
        _("multiphase").method = "get";
        _("multiphase").action = "/curation/download";
        _("multiphase").submit(function() { def.resolve(); });
    });
}

Answer 3

您應該從第一個函數返回值並添加條件，如果第一個函數成功執行，則另一個函數將起作用。 像下面的例子

<script type="text/javascript">
function downloadReport() {
    var x = upload();
    if(x){
        download();
    }
}
function upload(){
    alert("Waseem");
    if(response){
        return true;    
    }
    return false;

}

function download(){
    alert("Xax");
}
</script>