检测脚本是否已加载

Question

似乎helloworld.js根据我点击的次数加载多次#load.我这样说是因为当我查看Google Chromes开发人员工具网络标签时,它会显示helloworld.js我点击的次数#load.

$(document).ready(function() {

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

});

该hello()函数如下所示:

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

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

因此,如果它尚未加载,则加载它,如果已加载,则不加载它.

如果我单击#load按钮4次,这就是Developer Tools当前显示的内容:

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

这取自文档页面.