动态导入Js文件

var ScriptLoader = {
    worker: 0,
    isWait: false,
    readyQueue: [],
    callback: [],
    timer: null,

    wait: function () {
        if (!this._isComplateTask()) {
            this.isWait = true;
            this.readyQueue.unshift('wait');
        }
        //console.log('wait is true');
        return this;
    },

    _isComplateTask: function () {
        return this.worker === 0;
    },

    loadJs: function (url, async, callback) {
        console.log('load js ' + url);
        if (this.isWait) {
            // 将js加载到队列
            this.readyQueue.unshift(url);
            this.callback.unshift(callback);

            if (!this.timer) {
            // 定时处理队列
                var that = this;
                this.timer = setInterval(function () {
                    if (that.readyQueue.length === 0) {
                    // 队列消费完, 清除定时器
                        clearInterval(that.timer);
                        that.timer = null;
                    } else if (that._isComplateTask()) {
                        that._loadReady();
                    }
                }, 50);
            }
        } else {
            this._realLoad(url, async, callback);
        }
        return this;
    },

    /**
     * 消费队列
     */
    _loadReady: function () {
        var url;
        while (this.readyQueue.length > 0) {
            url = this.readyQueue.pop();
            if (url === 'wait') {
                if (!this._isComplateTask()) {
                    this.isWait = true;
                    break;
                }
            } else {
                this._realLoad(url, true, this.callback.pop());
            }
        }
    },

    _realLoad: function (url, async, callback) {
        this.worker++;
        var that = this;
        console.log('start load js ' + url);
        this._loadJsFile(url, function () {
            that.worker--;
            if (that.worker === 0) {
                //console.log('wait is false');
                that.isWait = false;
            }
            if(callback){
                callback();
            }
        }, async);
    },

    _loadJsFile: function (file, callback, async) {
        var head, d = document;
        ((head = d.getElementsByTagName('head')[0]) || (head = d.body.parentNode.appendChild(d.createElement("head"))));

        var script = d.createElement("script");
        script.type = "text/javascript";
        script.src = file;
        script.charset = 'UTF-8';
        if (async) {
            script.async = true;
        }

        if (script.readyState) {//IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {//其他浏览器
            script.onload = function () {
                callback();
            };
        }

        head.appendChild(script);
    }
};

 

转载于:https://www.cnblogs.com/sky-net/p/10030350.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值