如何防止创建重复的脚本元素

How to prevent creating duplicate script elements?

本文关键字：脚本 元素 何防止 创建      更新时间：2023-09-26

我正在使用谷歌地图，我正在使用他们的异步加载。

我使用的函数是:

ready = function() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=initialize';
  document.body.appendChild(script);
};

和我使用这个在我的地图的页面:

$.getScript('/assets/jsFile.js' ,function(){
    $(document).ready(ready);
    $(document).on('page:load', ready);
});

所以，当我第一次访问页面时，一切都很顺利，但在第二次访问它之后，脚本元素被重新创建，我面临这个错误:

您已经在此页面上多次包含了Google Maps API。这可能会导致意外错误。

如何防止分配给ready的函数创建重复项?

要使代码只运行一次，您可以使用一个变量来检查它是否已经运行过:

var readyExecuted = false;
function ready() {
  if (!readyExecuted) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=initialize';
    document.body.appendChild(script);
    readyExecuted = true;
  }
};

我认为，而不是$.getScript...你想做的是调用该脚本在你的html模板，然后询问是否页面已加载-考虑使用$when()...来做到这一点。如果你有多个资产要加载，并且你想在它们加载后才调用，考虑使用多个延迟对象和$when()...

的承诺延迟结构
// as examples
var windowLoadDeferred = windowLoaded(); // this would return a deferred object
var imagesDeferred = loadImages(); // as would this
$.when( windowLoadDeferred, imagesDeferred ).done( function( loaded, images ) {
    console.log("The deferred objects have been resolved!");
    init(images); // ...or whatever call suits your needs
});
相关文章：