Question

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

我正在使用的功能是：

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的函数创建重复项？

Answer 1

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

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;
  }
};

Answer 2

我认为您想要做的不是$.getScript...而是在您的html模板中调用该脚本然后询问该页面是否已加载 - 请考虑使用$when()...来执行此操作。如果您要加载多个资源，并且只想在加载后拨打电话，请考虑promise-deferred structure使用多个延迟对象和$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
});

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

2 个答案: