对于那些不熟悉的人,我正在使用一个名为 swup 的库来使用 CSS 创建页面转换。 repo 和信息在这里: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
之后, 你加回事件。
关于javascript - $.getscript 在使用 swup 库时创建多个调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52436155/