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文件将被调用两次。然后4次。然后是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之后，便会添加回事件。

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

1 个答案: