Jquery дважды загружает скрипт

Question

У меня есть функция, которая загружает соответствующие js-функции при нажатии, используя сокращенную запись ajax $. GetScript ()

Это выглядит так:

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

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

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

});

Thisработает нормально ... пока я снова не нажму #button и getScript не загрузит script.js снова, что означает, что любые функции внутри script.js запускаются не один раз, а дважды.

В другом потоке кто-то упомянул это проблема кеширования, и поскольку $ .getScript () является просто сокращением для $ .ajax () и , то, что по умолчанию запросы ajax не кэшируют скрипты , следует выполнитьдлинная версия с 'cache: 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);
        }
     });

});