Question

Scenrio：我有一个网络应用程序，用户可以对事情进行投票，当他们进入下一次投票时，所有内容都会被ajax加载。用户还可以单击先前的投票，并使用ajax将投票的详细信息加载到页面中。我遇到的问题是，当用户点击之前的投票时，页面最终会暂时冻结。这发生在第7/8点左右。在前几次点击后，所有新信息都会加载到dom超级快速，一切都很好。当页面冻结时，它会在20-25秒后解冻。

这是处理点击的js func，然后我使用js.erb文件将新信息加载到dom中：

$('.vote.complete').click(function()
{
    whence = "toCompleted";
    vote_id = $(this).data('vote_id');
    cid = $(this).data('campaign_id');

    c_title = $('#outfitPair'+cid).data('campaign_title');
    u_id = $('#outfitPair'+cid).data('other_id');

    //_gaq = window._gaq;

  //if(_gaq != undefined){
   // _gaq.push(['_trackEvent', 'ViewPreviousVote', c_title, u_id]);
  //}

    $('#outfitPair'+cid).find('.button.vote').removeClass('to-vote');
    $(this).addClass('to-vote');

    $.get('/campaigns/new_pair?whence='+whence+'&vote_id='+vote_id)

return false;
});

js.erb文件需要仔细查看。我或多或少地寻找可以调查的可能原因的建议，但我不希望给出这些小信息的确切答案。

编辑：我相信我已经找到了问题的主角。看起来每次点击一个旧的投票时，ajax调用它会使它增长两倍，而它应该只生成一个。

http://i.imgur.com/QnvaaBD.png

Answer 1

根据你的编辑，我会提出一个条件来阻止AJAX进行额外的调用。

$('.vote.complete').click(function() {

if (!$(this).hasClass('loading')) {

     $(this).addClass('loading');

     $.get(url,function() {

          $(this).removeClass('loading');

     });

}

});

Answer 2

固定。在我的js.erb文件中，我再次声明了点击处理程序，认为旧的点击处理程序在它仍然存在时不再受约束。这最终导致多个ajax调用，因为每次点击一次投票时点击处理程序的数量就会翻倍。从回调中删除点击处理程序后，现在一切都按预期工作。

在发出Ajax请求时，页面暂时无响应

2 个答案: