jQuery ajax/load 越来越慢

Question

我使用以下函数在点击时将内容加载到 #canvas 中:

jQuery(document).ajaxComplete(function(){

    jQuery('.tabs a').on('click',function(e) {
        e.preventDefault();
        jQuery('.tabs a').removeClass('active');
        jQuery(this).addClass('active');
    });

    jQuery('#blog').on('click',function(e) {
        jQuery('#canvas').load('blog.php');
    });
    jQuery('#news').on('click',function(e) {
        jQuery('#canvas').load('news.php');
    });
    jQuery('#gallery').on('click',function(e) {
        jQuery('#canvas').load('gallery.php');
    });

});

HTML:

<ul class="tabs">
     <a id="blog">Blog</a>
     <a id="news">News</a>
     <a id="gallery">Gallery</a>
</ul>

<div id="canvas"></div>

当选项卡被单击前几次时，这可以正常工作。但是，单击选项卡的次数越多，内容加载到#canvas 中的速度就越慢。最终，#canvas 内容开始在每个页面之间快速进出。

知道问题可能是什么吗？

我尝试用ajax替换load方法并将缓存设置为false，但问题仍然存在:

jQuery('#blog').on('click',function(e) {
    jQuery.ajax({
        url: 'blog.php',
        cache: false,
        success: function(result) {
            jQuery('#canvas').html(result);
        }
    });
});

Answer 1

您正在 Ajax 完成事件内连接事件处理程序，因此每次运行 Ajax 调用时，您的元素都会附加多个事件处理程序。 1 个、2 个、3 个、4 个处理程序等对每个处理程序执行相同的操作。这种不必要的重复最终会减慢您的页面速度。

在 Ajax 调用之外使用委托(delegate)事件处理程序。

例如

jQuery(document).on('click', '.tabs a',function(e) {
    e.preventDefault();
    jQuery('.tabs a').removeClass('active');
    jQuery(this).addClass('active');
});

jQuery(document).on('click', '#blog', function(e) {
    jQuery('#canvas').load('blog.php');
});
jQuery(document).on('click', '#news', function(e) {
    jQuery('#canvas').load('news.php');
});
jQuery(document).on('click', '#gallery',function(e) {
    jQuery('#canvas').load('gallery.php');
});

您根本不需要 jQuery(document).ajaxComplete(function(){。

委托(delegate)事件处理程序通过监听事件(例如click)来向上冒泡到祖先元素(如果没有其他更接近/方便的情况，则默认为document) 。然后它在事件时应用 jQuery 选择器，因此该项目只需要在那时存在。然后，它将事件的回调函数仅应用于引发该事件的匹配元素。

注意:不要将 body 用于委托(delegate)事件，因为它有严重的错误。