AJAX - 替换内容时的元素/类/定时器清理

时间:2012-02-23 00:21:40

标签: javascript ajax mootools destructor

许多开发人员将使用AJAX来生成基于Web的应用程序来检索数据和HTML。

我是网络开发和javascript的新手,但在其他语言的编程方面有几十年的经验。

我正在使用mootools,这是一个很棒的框架,但是一直在与javascript中缺少析构函数,甚至是针对dom元素的onDestroys / unloads进行战斗。

我编写了许多UI类(主要是为了学习),并且很多人使用setInterval定时器来定期从WebServer获取数据并更新页面上的元素(主要是来自摄像头的图像)。

当使用菜单请求另一个页面并且使用新的HTML和Javascript(使用Request.HTML)重新加载内容div时,会出现大多数问题。这个简单用新的元素替换div中已经存在的所有元素并运行新脚本。旧脚本中的任何计时器或创建的旧对象都将继续运行。这给我留下了许多孤儿,元素和计时器。

我一直在阅读mootools网站上的更多内容,并且已经意识到我一直在犯的一些错误,并且已经开始纠正很多问题。其中最大的不是使用Element.store和Element.retrieve而是直接将我的类链接到Elements。

我已经发现重新加载的div的内容需要通过在调用Request.HTML之前调用其所有子元素上的destroy来释放,但是不会删除(清除)正在运行的任何定时器。

所以我在这里做了一个JSFiddle deinitialize classes以显示我一直在尝试的东西,它似乎工作得很好,但以下和我想知道的是,

  • 这是个好主意吗?
  • 我可能错过了其他任何问题吗?
  • 你能看到这种类型的实现有什么问题吗?
  • 或者我正在重新发明轮子而错过了 什么?

解释

初始化类时,它会使用元素存储自己。

它也会将(自己必要的话)本身放入一个也与该元素一起存储的AssocClasses数组中。

我创建了一个ClearElement函数,每当元素的内容被替换为AJAX调用或其他方法时调用它,它获取div中的所有元素,如果它们和AssocClasses数组相连,则调用deinitialize在数组中的每个类上,然后它在每个直接子节点上调用destroy以释放元素/存储。

任何信息,指针等都会得到最好的回报。

1 个答案:

答案 0 :(得分:1)

Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript ( using Request.HTML ). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers.

我会重新考虑您的计时器存储以及在ajax调用中使用evalScripts。

将这些保留在您的AJAX请求之外。在进行同行代码审查时,我很少看到需要这些内容的实例,并且可以以更好的方式完成。

也许在点击的链接上,它会触发Complete或onSuccess上的回调函数

如果没有看到您的确切代码,将很难提出进一步的建议。