如何等待第三方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); 
}); 

下面的代碼片段取而代之接線扣的，我想從一個引導標籤事件的激活火的代碼。

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

我概念瞭解使用承諾和回調的，但是寫一個功能正常是一個不同的故事。

更新

此版本重構，以消除該按鈕的處理程序，從而提高可讀性。

用法也很重要。當頁面第一次加載時，它位於選項卡上。此選項卡與託管在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

我重構了您的代碼，以顯示如何使用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) 
 
    }) 
 

 

 
});

Answer 2

你可以使用一些higher order functions做你想做什麼。而不是將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 
    } 
} 

這不完全吸引人，但它應該得到你想要的東西。