Question

我正在设计一个Web应用程序，该应用程序要求我使用AJAX来导航页面，因此相同的框架是静态的，但内部内容会发生变化，例如

$(".nav > div").on('click',function(){
    var id = $(this).attr('id');
    $(".active").removeClass("active");
    $(this).addClass("active");
    $("#main").load("/page" + id + ".html");
  });

例如，

将加载page1.html，然后点击ID为“1”的元素。

然后我用

$(document).ajaxComplete(function() {...javascript...});

运行我将继续与内部内容交互的脚本。我的脚本包含许多功能，如

$('#fade').on('click', function() {
    $('#zoom').removeClass('grow').addClass('shrink');

与unqiue id进行交互，所有这些都在'/page[number].html'文件中相似。

如果我在一个完全静态的页面上运行它，我的脚本运行正常，但是当我开始介绍在内部框架中重新加载html的AJAX元素时，每次我进行AJAX调用时网站都变得越来越慢 - 通过使用.nav栏 - 直到崩溃。 javascript堆大小似乎几乎呈指数级增长，请参阅：

http://imgur.com/0mvoOjA

不仅js堆大小不断增加，而且“paint”似乎占用了大量内存。每个页面我正在加载一个新的，相当高的res图像，这可能是相关的吗？

我对AJAX调用相当新，所以任何指针都会受到赞赏！感谢

Answer 1

您可能在其他网页上使用$().on创建了事件处理程序，并且在导航到其他页面之前，您无法明确删除它们。

$(element).on(event, function() {
  // ...
});

当您创建这样的事件监听器时，jQuery维护对该函数的引用，这意味着它不能被垃圾收集。每次导航到新页面时，都会创建更多无法自动删除的事件处理程序。

function eventHandler() {
  // ...
}

// when the page is loaded
$(element).on(event, eventHandler);

// just before you leave
$(element).off(event, eventHandler);

更好的是，当你知道在你离开之前只需要与元素进行一次交互时，你可以使用one来创建一个只在它之前调用一次的事件监听器。自动解除引用。

$(element).one(event, eventHandler);
// don't worry about removing these handlers

如何构建此代码最好由您现有的应用程序架构决定。

Answer 2

您需要取消绑定事件。如果没有，则绑定事件并将事件绑定到元素而不是覆盖它。您可以使用$('#yourElement').unbind('click');

执行此操作

随着AJAX调用，JavaScript堆大小不断增加

2 个答案: