页面中的某个js注入时间不确定，而且提供了ready事件，我怎么在使用时确保他一定存在呢？

Question

比如有个全局变量STS，这个变量所在的js文件是客户端注入到我们的页面里的，注入到页面后并初始化完成后会执行一个ready事件。可是这个js文件的注入时间却无法保证，我们只能每次都检测一下，如果存在则直接使用，不存在的话，需要ready一下：

if( window.STS ){
    load();
}else{
    document.addEventListener('stsready', function(){
        load();
    })
}

可是我在使用这个变量里的方法时，总不能每次都这样写一遍检测STS是否存在吧：

const tip = function( msg ){
    STS.showTip(msg);
}
if( window.STS ){
    tip( Date.now() );
}else{
    document.addEventListener('stsready', function(){
        tip( Date.now() );
    })
}

有没有通过Promise或者什么方式来包装一下，每次使用时都能保证全局变量存在，如果不存在就先暂时存储起来，等ready事件执行后，再一并执行呢？

function BB(){

}
var bb = new BB();
bb.invoke('showTip', Date.now());

比如这样的，通过BB包装一下，然后后面我直接使用即可，这样我就能调用到STS中的showTip方法，不用再每次都检测STS了。 谢谢了

Answer 1

使用Promise编写一个ready函数，然后调用一下即可：

class BB {
    __ready = false;

    constructor() {

    }

    ready() {
        if (this.__ready || window.STS) {
            return Promise.resolve(window.STS);
        }
        return new Promise((resolve) => {
            document.addEventListener('stsready', function(){
                this.__ready = true;
                resolve();
            })
        })
    }

    async invoke(fn, ...params) {
        await this.ready();
        fn.bind(null, ...params);
    }
}

var bb = new BB();
bb.invoke('showTip', Date.now());

Answer 2

感觉这个解决思路引入了不少问题；既然这样，如果这个注入进来的 JS 文件不包含动态内容的话，可不可以封装成 SDK 直接给前端使用？

Answer 3

建一个任务数组，并监听这个数组对象，sts不存在时将需要执行的回调存起来，ready完成和数组变化时都去检查任务队列长度 依次调用回调 回调然后在任务队列数组删除该回调 这样你就不用去管他是否加载了，没加载就会把任务依次挂起，加载完成了就会先把一个任务放进任务队列，然后立即拿出来执行