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

$.getscript creates multiple calls when using swup library

对于那些不熟悉的人,我正在使用一个名为 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,以此类推。

这当然会破坏性能并且几乎会使计算机死机。当通过页面上的 swup 加载内容时,调用该 js 文件的更好方法是什么?

显然你的 main.js 更改了内容,因此重新宣传了两次活动。

一个选项是,在标记为 false 的 html 中添加全局字段,然后深入研究您的 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之后,再添加回事件。