用于脚本加载的预初始化jQuery代码不起作用

Pre-initialization jQuery code for script loading not working

本文关键字：jQuery 代码 不起作用 初始化 脚本 加载 用于      更新时间：2023-09-26

当我点击位置选项卡时，我的网站会加载谷歌地图api，然后初始化地图。我不想在点击这个标签之前加载api。我注意到它每次点击标签都会加载api（导致网站内存使用量增加）。我封装的if/else语句在click()函数中不起作用。我还按照https://stackoverflow.com/a/11803418/4184379.我已经在if/else上检查了类似的答案，但它们并没有起到任何作用。

$("[id=location-tab]").click(function() {  
  if (typeof google.maps.event.trigger == 'undefined') {
    $.when(
      $.getScript("https://maps.googleapis.com/maps/api/jsv=3.exp&sensor=false&callback=initialize" ),
      $.getScript( "assets/js/gmap.js" ),
      $.Deferred(function( deferred ) {
        $( deferred.resolve );
      })
    ).done(function() {
      initialize();
    });
  }
  else {
    google.maps.event.trigger(map_canvas, 'resize');
  }
});

是否检查了是否在dom上执行$("[id=location-tab]").click(function() {...？因为这似乎也很奇怪，您添加了一个延迟，该延迟在准备就绪的dom上解析到您的when调用。它应该可以很好地解决，但它让人觉得你在准备dom之前添加了点击。

有两个问题。一种是在确定库的可用性时，如果例如google未定义，则if将抛出异常。一般来说，以下代码更健壮：

if (window.google && window.google && window.google.maps &&...) {
   google.maps.event.trigger(map_canvas, 'resize');
} else {
   if (!libraryIsLoading) { //needs to be defined somewhere in global scope...
     libraryIsLoading = true; 
     //load library here
   }
}

这个if是从左到右求值的，因此它排除了异常的机会。然而，正确加载库是相当棘手的。在大多数情况下，使用require.js是值得的，或者，如果您想寻找较小大小的库，请查看curl.js

我会使用curl或require或任何替代方案，而不是简单地编写自己的代码，因为我肯定会在项目的其他部分使用它：它提供了一种组织代码并使其经得起未来验证的方法。

相关文章：