异步脚本加载回调

IT技术 javascript function asynchronous callback
2021-03-10 23:32:53

http://jsfiddle.net/JamesKyle/HQDu6/

我创建了一个基于谷歌分析异步脚本的 Mathias Bynens 优化的简短函数，如下所示：

function async(src) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + src;
  s.parentNode.insertBefore(o, s);
}

这很好用，我已经开始将它用于几个不同的脚本

// Crazy Egg
async('dnn506yrbagrg.cloudfront.net/pages/scripts/XXXXX/XXXXX.js?' + Math.floor(new Date().getTime() / 3600000));

// User Voice
var uvOptions = {};
async('widget.uservoice.com/XXXXX.js');

// Google Analytics
var _gaq = [['_setAccount', 'UA-XXXXX-XX'], ['_setDomainName', 'coachup.com'], ['_trackPageview']];
async('google-analytics.com/ga.js');

// Stripe
async('js.stripe.com/v1');​

当我遇到一个需要在加载后调用的脚本时，问题就来了：

// Snap Engage
async('snapabug.appspot.com/snapabug.js');
SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');

所以我想我会把它变成一个回调函数，可以这样使用：

async('snapabug.appspot.com/snapabug.js', function() {
    SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
});

我没想到这对我来说会很困难，但结果就是这样。

我的问题是在不使代码过于复杂的情况下添加回调的最有效方法是什么。

参见 jsfiddle：http : //jsfiddle.net/JamesKyle/HQDu6/

3个回答

感谢RASG提供https://stackoverflow.com/a/3211647/982924

带回调的异步函数：

function async(u, c) {
  var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
  o.src = '//' + u;
  if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
  s.parentNode.insertBefore(o, s);
}

用法：

async('snapabug.appspot.com/snapabug.js', function() {
    SnapABug.init('XXXXX-XXXXX-XXXXX-XXXXX-XXXXX');
});

js小提琴

我认为这需要更多的逻辑来处理 IE8 及之前的版本，例如参见：aaronpeters.nl/blog/prevent-double-callback-execution-in-IE9
2021-04-26 23:32:53
可怕的变量名
2021-04-29 23:32:53
该行o.u = '//' + u;应该读取o.src = '//' + u;，否则它不会加载单个字节。缩小有时会很棘手。
2021-05-11 23:32:53
我认为这个解决方案更全面，也包括一个Promise实现：stackoverflow.com/questions/7718935/load-scripts-asynchronously
2021-05-17 23:32:53
s.addEventListener 应该是 o.addEventListener
2021-05-18 23:32:53

最近的一个片段：

async function loadAsync(src) {
    const script = document.createElement('script');
    script.src = src;
    return new Promise((resolve, reject) => {
        script.onreadystatechange = function () {
            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                script.onreadystatechange = null;
                resolve(true);
            }
        };
        document.getElementsByTagName('head')[0].appendChild(script);
    });
}

利用率

  loadAsync(`https://....js`).then(_ => {
    //  ... script loaded here
  })

James Kyle 的回答没有考虑 IE9。这是我在评论中建议的链接中找到的代码的修改版本。修改 var baseUrl 以便它可以相应地找到脚本。

//for requiring a script loaded asynchronously.
function loadAsync(src, callback, relative){
    var baseUrl = "/resources/script/";
    var script = document.createElement('script');
    if(relative === true){
        script.src = baseUrl + src;  
    }else{
        script.src = src; 
    }

    if(callback !== null){
        if (script.readyState) { // IE, incl. IE9
            script.onreadystatechange = function() {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {
            script.onload = function() { // Other browsers
                callback();
            };
        }
    }
    document.getElementsByTagName('head')[0].appendChild(script);
}

用途：

loadAsync('https://www.gstatic.com/charts/loader.js' , function(){
    chart.loadCharts();
    });
// OR relative path
loadAsync('fastclick.js', null, true);
干得好，感谢您的出色回答。只需将函数最后一行中的“doc”更改为“document”。
2021-04-30 23:32:53

其他答案效果很好，但不是超级可读或需要Promise。这是我的两分钱：

function loadScript(src, callback) {
    var script = document.createElement('script');
    script.setAttribute('src', src);
    script.addEventListener('load', callback);
    document.head.appendChild(script);
},
其它你可能感兴趣的问题
上一篇如何命名 es6 类（用于 React 组件） 下一篇是否可以将 JavaScript 变量保存为文件？