更精细的细节

Question

我使用 jQuery 和 history.js 来管理部分页面之间的动态转换;这样我就可以避免重新加载整个文档。其中一些部分页面调用自己独特的 javascript 文件。虽然页面之间的转换效果很好，但在调用它的部分页面被动态替换之后，已执行的 javascript 的残余仍保持活动状态。

如何卸载动态页面加载时引入的 javascript ，后来被其他页面异步替换？

更精细的细节

主模板

我的主模板（用于所有页面）可以被认为是一个简单的：

<html>
<head>
<script>
    //scripts to manage asynchronous loading of partial-pages into #content div
</script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

用户个人资料

在 #content div中呈现的一个部分页面是针对用户的个人资料：

<script src="profile.js"></script>
<form>
    <input type="file" name="profile-picture">
</form>

profile.js 的内容类似于：

$(function() {
    $('input').change(function() {
        // upload profile picture asynchronously
    });
});

用户设置

在主模板的 #content div中加载的另一个部分页面是用户的设置：

<script src="settings.js"></script>
<form>
    <input type="text" name="first-name">
    <input type="text" name="last-name">
</form>

settings.js 的内容类似于：

$(function() {
    setInterval(function() {
        // auto-submit form every 10 seconds
        $('form').submit();
    }, 10000);
}
});

问题

某些 javascript 函数在调用它们的部分页面被其他页面替换后继续运行（例如 setInterval ）。
为每个部分页面加载新 javascript 的业务感觉很乱;但是对于我的生活，我找不到任何关于最佳实践的建议。

在为每个部分页面提供特定于页面的脚本的同时，实现动态部分页面加载/卸载效果的更好方法是什么？

谢谢！

Answer 1

首先......一旦你加载了javascript ......你就无法卸载它

setInterval问题需要使用clearInterval

声明一些深奥的名称，当你初始化setiIterval;时，它会使它作为全局变量相当独特。确保在使用之前在var之外声明$(document).ready

var my_super_form_submitter

$(document.ready)function(){...
 my_super_form_submitter=setInterval(func.....

然后每当你加载一个新页面

if(my_super_form_submitter)
clearInterval(my_super_form_submitter)

对于与其他方法的冲突....您可以为您的页面特定代码采用内容类协议。在每个页面加载时，更改内容div的类...然后在jQuery的选择器中使用该类

Answer 2

对于第一个问题：

问题是更换包后继续运行的功能。你提到的SetInterval使用js计时器，只是自动替换包不会停止计时器。您应该在替换之前清除通过setInterval启动的所有计时器。

E.g。

$(function() {
    var timer = setInterval(function() {
        // auto-submit form every 10 seconds
        $('form').submit();
    }, 10000);
}

function uninitialize(){
    clearInterval(timer);
}

在更换包之前调用uninitialize，它应该可以正常工作。

不幸的是我不知道加载部分页面的任何正确方法，但我希望它可以帮助你（

我应该如何加载/卸载动态加载的部分页面调用的JS？

更精细的细节

主模板

用户个人资料

用户设置

问题

2 个答案: