Jquery加载脚本两次问题

Question

我有一个函数，可以使用ajax的简写方式在点击时加载相关的js函数$.getScript()

看起来像这样:

$('#button').click(function() {

    $.getScript('/script.js');

    $.ajax({
        type: 'GET',
        url: '/file.php',
        cache: false,
        success: function(data) {
            $('#window').html(data);
        }
     });

});

这工作正常......直到我再次单击 #button 并且 getScript 再次加载 script.js 意味着 script.js 中的任何函数都不会被触发一次，而是两次。

In another thread somebody mentioned这是一个缓存问题，并且由于 $.getScript() 只是 $.ajax() 的简写并且，默认情况下 ajax 请求不会缓存脚本，而人们应该这样做带有“缓存:true”的长版本。

所以我尝试了:

$('#button').click(function() {

    $.ajax({
      url: 'script.js',
      dataType: 'script',
      cache: true,
      success: function(data) {

        $.ajax({
            type: 'GET',
            url: '/file.php',
            cache: false,
            success: function(data) {
                $('#window').html(data);
            }
         });

      }
    });
});

不幸的是，我仍然在同一条船上，每次我单击 #button 时，script.js 中的所有函数都会被一次又一次地附加。

一个人该做什么？如何只加载一次脚本，和/或检查资源是否已加载，如果已加载，则无需再次加载全部内容？

Answer 1

//在文档就绪的范围内，因此 loaded 不是全局的:

var loaded = false;

$('#button').click(function() {

    if ( !loaded ) {
        $.getScript('/script.js', function() {
             loaded = true;
        });
    }

    $.ajax({
        type: 'GET',
        url: '/file.php',
        cache: false,
        success: function(data) {
            $('#window').html(data);
        }
     });

});