jQuery点击手柄在多次点击后运行缓慢

jQuery click hander slow to run after many clicks

本文关键字：运行 缓慢 jQuery      更新时间：2023-09-26

我正在尝试将一个点击处理程序绑定到DOM上的几个元素。单击后，该元素将在阴影框中加载一些新内容。在玩了一段时间代码后，我注意到每次点击都需要越来越长的时间来加载。

我通过禁用除了一个简单的console.log之外的所有点击处理程序的功能来测试这一点。即使在这之后，到第15次点击时，响应也越来越慢。我点击了哪篇帖子，甚至内容已经加载，都无关紧要——在第15次点击这个".shadowbox-link"元素时，速度真的开始变慢了。

这是我的点击处理程序：

$j('#content article .shadowbox-link').bind('click', showShadowboxPost);

进入功能：

    var showShadowboxPost = function() {
    // Unbind click handler
    $j(this).unbind('click', showShadowboxPost);
    // Variables for ajax request
    var postData = {
        'postId':     $j(this).attr('data-id'),
        'postType':   $j(this).attr('data-type'),
        'elementId':  $j(this).attr('id'),
        'prevPost':   $j(this).prev().attr('id'),
        'nextPost':   $j(this).next().attr('id')
    };
    preFadeIn();
    // If content already loaded, avoid ajax request
    // The following functions include the fadeIn
    if($j(this).children('.single-post').length !== 0) {
        preLoadedRequest(this)
    } else {
        ajaxRequest(postData, this)
    }
    // Rebind click handler
    $j(this).bind('click', showShadowboxPost);
    return false;
};

此处为完整文件：http://www.clarkthomasny.com/wp-content/themes/cleanslate/js/shadowbox-post.js

HTML基本上是这样的：

<div id="content">
  <div id="articles">
      <article class="shadowbox-link"></article>
      <article class="shadowbox-link"></article>
      <article class="shadowbox-link"></article>
      [etc..]
  </div>
</div>

以下页面位于：http://www.clarkthomasny.com/

我尝试了几种不同的方式来调试它，但我仍然不确定发生了什么，并认为这一定与将点击处理程序绑定到这么多元素有关？我已经在jQuery工作了几年了，我被难住了，请帮帮我。谢谢

使用本机DOM处理程序

document.getElementById('anchorID').onclick=function(){/* some code */}

对不起！这个错误与我发布的代码无关。另一个文件包含所有链接的点击手柄（我知道这是个坏主意），我不小心绑定了两次。因此积累的缓慢。感谢大家的帮助！

相关文章：