1

我有一个名为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 被解决时，应该创建一个函数 abc()。

我的问题：我如何在承诺之外使用这个功能？

例如，考虑下面的示例（在 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 代码是内联的，它仍然不起作用。

4

1 回答 1

1

如果 this 在内部声明，您可能无法使用该函数.then。因为这个函数abc对于传递给.then& .then 的回调函数是私有的，所以只会使用 ajax 执行。

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

于 2018-03-06T07:31:20.077 回答