$.getscript在使用swup库时创建多个调用

Question

对于那些不熟悉的人，我使用一个名为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文件会被调用两次。然后四次。然后是8，等等。

当然，这会破坏性能，而且几乎会使计算机冻结。当通过页面上的swup加载内容时，有什么更好的方法来调用js文件？

Answer 1

显然，您的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之后，就可以添加回事件。