$ .getscript создает несколько вызовов при использовании библиотеки swup - PullRequest
Новая
       36

$ .getscript создает несколько вызовов при использовании библиотеки swup

0 голосов
/ 21 сентября 2018

Для тех, кто незнаком, я использую библиотеку swup для создания переходов страниц с помощью CSS.Репо и информация здесь: https://github.com/gmrchk/swup

По сути, это альтернатива переходам ajax, которые, по моему мнению, были довольно интересными и их было проще использовать на моем сайте портфолио.

Моя проблема в том, что мне нужно загрузить файл скрипта, когда новый контент загружается через swup.В настоящее время я использую jQuery, чтобы просто загрузить свой файл скрипта.Функция $ .getscript вызывается с использованием события swup, называемого 'swup: contentReplaced': 

document.addEventListener('swup:contentReplaced', event => {
  $.getScript("/js/main.js");
});

. Проблема в том, что это создает какую-то ошибку, которая удваивает каждый вызов, созданный swup.Поэтому в следующий раз, когда произойдет событие swup: contentReplaced, файл main.js вызывается дважды.Потом 4 раза.Затем 8 и т. Д.

Это, конечно, снижает производительность и в значительной степени приводит к зависанию компьютера.Как лучше назвать этот js-файл, когда содержимое загружается с помощью swup на страницу?

1 Ответ

0 голосов
/ 21 сентября 2018

Очевидно, что вы main.js измените содержимое и, таким образом, повторно отстаиваете событие дважды.

Один из вариантов - добавить глобальное поле в html, помеченное как false, и копать в свой main.jsнайти фрагмент кода, который вызывает у вас проблемы, например, 

//In HTML
<data style="display:none" id="flag" value="0" />

//In main.js
$('#flag').val("1");
//...Part causes trouble
$('#flag').val("0");

//eventListener
document.addEventListener('swup:contentReplaced', event => {
  if $('#flag').val() == "0"{
     $.getScript("/js/main.js");
  }
});

Но это может не решить проблему, так как у вас могут возникнуть проблемы с поиском проблемной части (скажем).

Тогда более удобный способ - использовать once

document.addEventListener('swup:contentReplaced', event => {
  $.getScript("/js/main.js");
}, {once:true});

и в конце main.js, также добавить эту строку .

И, таким образом, каждый разВы можете вызвать $.getScript("/js/main.js"); только один раз, и сразу после выполнения main.js вы добавляете событие назад.

...