时间戳

首页 > 解决方案 > $.getscript 在使用 swup 库时创建多个调用

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

问题描述

对于那些不熟悉的人，我正在使用一个名为 swup 的库来使用 CSS 创建页面过渡。回购和信息在这里：https ://github.com/gmrchk/swup

这本质上是 ajax 转换的替代方案，我觉得它非常有趣并且更容易在我的投资组合网站上使用。

我的问题是，当通过 swup 加载新内容时，我需要加载我的脚本文件。我目前正在使用 jQuery 来加载我的脚本文件。使用来自 swup 的事件调用 $.getscript 函数，称为“swup:contentReplaced”：

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

这样做的问题是，这会产生某种错误，使 swup 创建的每个调用加倍。所以下一次 'swup:contentReplaced' 事件发生时，main.js 文件会被调用两次。然后4次。然后是 8，以此类推。

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

标签： javascriptjqueryajaxgetscript

解决方案

显然，您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，你添加回事件。

推荐阅读