如何等待第三方JavaScript函數返回

Question

給出以下代碼段

var empowerInstance = null;

function onClick_btnSendMessage() {
    var childIFrame = window.document.getElementById("editorFrame");
    if (!empowerInstance) {
        empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin);
    }
    empowerInstance.document.hasChanged(hasChangedCallback);
}

function hasChangedCallback(returnValue) {
    console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
    if (returnValue.success === true && returnValue.isDirty === true) {
        empowerInstance.document.save(saveCallback);
    }
}

function saveCallback(returnValue) {
    console.log("empowerInstance.document.save = " + returnValue.success);
    if (returnValue.success === false) {
        console.log(returnValue.message);
    }
}

window.addEventListener("DOMContentLoaded", function (event) {
    console.log("DOM fully loaded and parsed");
    if (typeof location.origin === "undefined")
        window.location.origin = window.location.protocol + "//" + window.location.host;
    document.getElementById("btnSendMessage").addEventListener("click", onClick_btnSendMessage);
});

我不想啟動按鈕，而是想通過啟動Bootstrap選項卡事件來觸發代碼。

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {

    onClick_btnSendMessage(); // Naive way, as this does not wait

    var target = $(e.target).attr("data-EditorUrl"); // activated tab
    var childIFrame = $("#editorFrame");
    childIFrame.attr("src", target);

});

因此，我的問題是“如何在更改childIFrame的源之前等待該功能完成？”。

empowerInstance.document.hasChanged(hasChangedCallback);

我從概念上理解了Promises和Callbacks的用法，但是編寫一個功能正確的說法卻是另一回事。

更新

對該版本進行了重構，以消除按鈕處理程序，從而提高了可讀性。

用法也很重要。 首次加載頁面時，它位於選項卡上。 該標簽與在iFrame中托管的文檔相關聯。 如果用戶編輯此文檔，然后嘗試更改標簽，則我想調用檢查是否臟/保存，然后保存后，移至下一個標簽/文檔。 在某些情況下，選項卡/文檔之間的切換不會導致保存，因為文檔不臟。

var empowerInstance = null;

function hasChangedCallback(returnValue) {
    console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
    if (returnValue.success === true && returnValue.isDirty === true) {
        empowerInstance.document.save(saveCallback);
    }
}

function saveCallback(returnValue) {
    console.log("empowerInstance.document.save = " + returnValue.success);
    if (returnValue.success === false) {
        console.log(returnValue.message);
    }
}

$(function () {

    if (typeof location.origin === "undefined") {
        window.location.origin = window.location.protocol + "//" + window.location.host;
    }

    $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {

        var childIFrame = $("#editorFrame");
        if (!empowerInstance) {
            empowerInstance = EditorAPI.getInstance(childIFrame[0].contentWindow, window.location.origin);
        }
        empowerInstance.document.hasChanged(hasChangedCallback);// Need to wait for completion 

        var target = $(e.target).attr("data-EditorUrl"); // activated tab
        childIFrame.attr("src", target);

    });
});

謝謝斯蒂芬

Answer 1

您可以使用一些高階函數來執行所需的操作。 相反，傳遞的hasChangedCallback和saveCallback直接向empowerInstance.document方法，你會改為調用返回的回調函數，而且沿着你自己的回調傳遞，你會打電話一旦所有的異步操作都終於完成了。 外觀如下：

$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
    var target = $(e.target).attr("data-EditorUrl"); // activated tab

    onClick_btnSendMessage(function () {
        var childIFrame = $("#editorFrame");
        childIFrame.attr("src", target);
    });
});

function onClick_btnSendMessage(myCallback) {
    var childIFrame = window.document.getElementById("editorFrame");
    if (!empowerInstance) {
        empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin);
    }
    empowerInstance.document.hasChanged(getHasChangedCallback(myCallback));
}

function getHasChangedCallback(myCallback) {
    return function hasChangedCallback(returnValue,  myCallback) {
        console.log("empowerInstance.document.hasChanged = " + returnValue.isDirty);
        if (returnValue.success === true && returnValue.isDirty === true) {
            empowerInstance.document.save(getSaveCallback(myCallback));
        }
    } 
}

function getSaveCallback(myCallback) {
    return function saveCallback(returnValue) {
        console.log("empowerInstance.document.save = " + returnValue.success);
        if (returnValue.success === false) {
            console.log(returnValue.message);
        }

        myCallback && myCallback(); // make sure myCallback isn't null before invoking
    }
}

它並不完全吸引人，但它可以為您帶來想要的東西。

Answer 2

我已經重構了您的代碼，以展示如何使用Promise做到這一點。

 function onClick_btnSendMessage() { var childIFrame = window.document.getElementById("editorFrame"); if (!empowerInstance) { empowerInstance = EditorAPI.getInstance(childIFrame.contentWindow, window.location.origin); } var doc = empowerInstance.document; return hasChanged(doc).then(function() { return save(doc) }) } function hasChanged(doc) { return new Promise(function(resolve, reject) { doc.hasChanged(function(returnValue) { if (returnValue.success === true && returnValue.isDirty === true) { resolve(returnValue) } else { reject(returnValue) } }) }) } function save(doc) { return new Promise(function(resolve, reject) { doc.save(function(returnValue) { if (returnValue.success === false) { console.log(returnValue.message); reject(returnValue) } else { resolve(returnValue) } }) }) } // ------ $('a[data-toggle="tab"]').on("shown.bs.tab", function(e) { onClick_btnSendMessage().then(function() { var target = $(e.target).attr("data-EditorUrl"); // activated tab var childIFrame = $("#editorFrame"); childIFrame.attr("src", target); }).catch(function(error) { // handle the error console.error('Error!', error) }) });