检测脚本是否已经加载

Question

根据我单击#load 的次数，helloworld.js 似乎被多次加载。我这样说是因为当我查看 Google Chrome 开发者工具网络选项卡时，它显示 helloworld.js 的次数与我点击 #load 的次数一样多。

$(document).ready(function() {

    $("#load").click(function(){
        $.getScript('helloworld.js', function() {
            hello();
        });
    });

});

hello() 函数如下所示：

function hello(){
    alert("hello");
}

是否可以检测helloworld.js是否已经加载？

所以如果还没有加载，就加载它，如果已经加载，就不要加载它。

如果我点击#load 按钮 4 次，这就是开发者工具当前向我显示的内容：

Answer 1

文件加载成功时设置一个标志。如果设置了标志，则再次跳过文件加载。

试试这个代码，

    var isLoaded = 0; //Set the flag OFF 

    $(document).ready(function() {

        $("#load").click(function(){
            if(isLoaded){ //If flag is ON then return false
                alert("File already loaded");
                return false;
            }
            $.getScript('helloworld.js', function() {
                isLoaded = 1; //Turn ON the flag
                hello();

            });
        });

    });

Answer 2

那么为什么不只像这样触发一次事件：

$("#load").one("click", function() {
   $load = $(this);
   $.getScript('helloworld.js', function() {
       hello();
       // bind hello to the click event of load for subsequent calls
       $load.on('click', hello); 
   });
});

这将防止后续加载并避免使用全局

Answer 3

另一种选择是让.getScript() 运行，但让它从浏览器的缓存中获取脚本，这样您就不会每次都重新加载它。

为此，添加这样的代码：

$.ajaxSetup({
    cache: true
});

这取自documentation page。

Answer 4

你可以创建一个辅助函数：

var getScript = (function() {
  var loadedFiles = {};
  return function(filename, callback) {
    if(loadedFiles[filename]) {
      callback();
    } else {
      $.getScript(filename, function() {
        loadedFiles[filename] = true;
        callback();
      });
    }
  };
})();