javascript - 在其范围之外使用 Promise 的 .then 方法中的函数

Question

我有一个名为 paintTiming.js 的文件，它使用 Paint Timing API用于找出 Web 性能参数，例如 First Paint 和 First Contextual Paint。文件内容如下所示:

var FP, FCP, obj = [];

function parent() {
    if ("PerformanceObserver" in window) {
        let observerPromise = new Promise((resolve, reject) => {
            // access the PerformanceObserver interface
            let observer = new PerformanceObserver((list) => {
                resolve(list);
            });

            observer.observe({
                entryTypes: ["paint"]
            });
        }).then((list) => {
            // Find out First Paint and First Contextual Paint
            FP = list.getEntries()[0].startTime;
            FCP = list.getEntries()[1].startTime;
            // Store in array
            obj[0] = FP;
            obj[1] = FCP;
            element = "The paint times are: <br> First Paint : " + FP + "ms, <br> First Contentful Paint : " + FCP + "ms";
            // show values on web page
            document.getElementsByTagName('p')[1].innerHTML = element;
        }).then(() => {
            // check if array is created, and is functioning
            console.log(obj[0]);
        }).then(() => {
            // create function
            function abc() {
                return {
                    a: obj[0],
                    b: obj[1]
                };
            };
        }).catch((error) => {
            console.warn(error);
        });
    }
};

如您所见，当 promise 被 resolve 时，函数 abc() 应该被创建。

我的问题:如何在 promise 之外使用此功能？

例如，考虑下面的示例(在 HTML 文件中使用):

<script type="text/javascript" src="paintTiming.js"></script>
<script type="text/javascript">
    // should return object containing FP and FCP values    
    console.log(abc());
</script>

控制台显示函数未定义。如果 JS 代码是内联的，它仍然不起作用。

Answer 1

如果在 .then 中声明，您可能无法使用该函数。因为此函数 abc 是传递给 .then 的回调函数的私有(private)函数 & .then 将仅使用 ajax 执行。

或者，您可以在 Promise 之外定义此函数，并在 .then 回调中调用此函数。还需要使用 this

bind 上下文