Question

我正在使用自己的CMS系统。它部分用于Ajax和jQuery，但问题是我使用了大量的点击事件。因此，当我一直点击我网站上的不同项目时，会降低系统速度。最终它不再做任何事了。我对点击事件是否正确，我如何以良好的方式使用它？我使用了.bind和.on事件处理程序。

$(document).ready(function(){


//Standards
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$('#wrapper').css('width',windowWidth);
$('#content').css('height',windowHeight);


//Click related items
$('.listItem').bind('click',function() {
    var itemID = $(this).attr('rel');
    $('#content').load('showitems.php',{newID:itemID});
});


//Click on tab
$('.liBase a').on('click', function() {
    $('.liBase a').parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().addClass('activeList');
});


//Click pages

$('.page').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('showpages.php',{newID:pageID});
});

$('.item').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('showitems.php',{newID:pageID});
});

$('.editItem').on('click', function() {
    var newID = $(this).attr('rel');
    $('.editPage').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('edititem.php',{itemID:newID});
});

$('.editPage').on('click',function() {
    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('editpage.php',{pageID:newID});
});

$('.deleteItem').on('click', function() {
    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'items',tblID:'itemID'});
});

$('.deletePage').on('click',function() {

    var newID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(this).parent().parent().addClass('activeList');
    $('#content').load('../control/deleteRecords.php',{postID:newID,tblName:'pages',tblID:'pageID'});
});

$('#addPage').on('click', function() {
    $('#content').load('addpage.php');
});

$('#addItem').on('click', function() {
    $('#content').load('additem.php');
});


$('#imageShow a').on('click', function() {
    var pageID = $(this).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $(this).parent().addClass('activeList');
    $('#content').load('showimages.php');

});

$('#imageAdd').on('click', function() {
    $('#content').load('addimage.php');
});



});

Answer 1

我建议你做以下事情（首先是简单的; D）

1）缓存你经常使用的jQuery对象。

 $item = $('.item');

2）重构您的代码以删除冗余

$('.editPage').on('click',function() {
    doStuff(this);
    $('#content').load('editpage.php',{pageID:newID});
});

function doStuff(that){
    var newID = $(that).attr('rel');
    $('.liBase').parent().parent().removeClass('activeList');
    $('#imageShow').removeClass('activeList');
    $(that).parent().parent().addClass('activeList');
}

3）看看你是否可以限制绑定的点击事件的数量（是否存在不必要地绑定多个点击事件的元素？）

4）进行性能分析（Chrome devtools是一个不错的选择）

是网络 - 通过丢弃旧的或排队来限制请求的频率
描述你的内存消耗 - 你的代码中是否会占用大量内存

通过在jquery中单击多次来减缓进程

1 个答案: