如何在快速多次点击时修复点击事件

Question

我正在尝试单击一行以显示和隐藏侧面板。

示例：单击某行，并且侧面面板必须可见。如果单击同一行，则必须隐藏侧面板，但是如果单击另一行，则必须将侧面板隐藏一小段时间，然后再次显示。

问题是，如果您多次快速单击行/行，则如果我没有单击，侧面板的滑动效果就会继续。我需要更改什么？

谢谢！

$( document ).ready(function() {

$('.table tr').hover(tableRowHover);

function tableRowHover() {
  $(this).find('td > div').toggleClass('hovered');
}

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

    var tableData = $(this).find('td > div');
    var selected = $(tableData).hasClass("bordered");
    var paneVisible = $('#detailsPane').is(":visible");

    $(".details > td > div").removeClass("bordered");

    if (!selected) {
      $(tableData).addClass("bordered");
      $('#detailsPane')
        .hide(0, "slide", { direction: "left" })
        .delay(100)
        .show("slide", { direction: "right" }, 800);
    } else if (selected && paneVisible) {
      $('#detailsPane').hide("slide", { direction: "right" }, 800);
    }

  });
});

 .table {
    min-width: 1200px;
    width: 100%;
}

.table thead th {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    border-top: 0;
    border-bottom: 0;
}

.table td {
    padding: 10px 0 0 !important;
    font-size: 12px;
    border-top: 0;
    border-bottom: 0;
}

.table td > div {
    display: flex;
    align-items: center;
    height: 52px;
    padding: 20px;
    background-color: #fff;
    box-shadow: 7px 3px 7px rgba(65, 78, 121, .06);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.table td:first-child > div {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 1px solid #fff;
}

.table td:last-child > div {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid #fff;
}

.table td > div.hovered {
    background-color: #baeb8d;
    border-top: 1px solid #93e04c;
    border-bottom: 1px solid #93e04c;
}

.table td:first-child > div.hovered,
.table td:first-child > div.bordered {
    border-left: 1px solid #93e04c;
}

.table td:last-child > div.hovered,
.table td:last-child > div.bordered {
    border-right: 1px solid #93e04c;
}

.table td > div.bordered {
    background-color: #fff;
    border-top: 1px solid #93e04c;
    border-bottom: 1px solid #93e04c;
}

.pane {
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100%;
    padding: 50px 40px;
    background-color: #baeb8d;
    box-shadow: 0 0 9px rgba(65, 78, 121, 0.05);
    z-index: 2200;
}

.hidden {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>



<table class="table">
    <thead>
      <tr>
        <th>TABLE HEADING</th>
        <th>TABLE HEADING</th>
        <th>TABLE HEADING</th>
        <th>TABLE HEADING</th>
      </tr>
  </thead>

  <tbody>
    <tr class="details">
      <td>
        <div>
          <a href="#">Link 1</a>
        </div>
      </td>
      <td>
        <div>Data 1</div>
      </td>
      <td>
        <div>Data 1</div>
      </td>
      <td>
        <div>Data 1</div>
      </td>
    </tr>

    <tr class="details">
      <td>
        <div>
          <a href="#">Link 2</a>
        </div>
      </td>
      <td>
        <div>Data 2</div>
      </td>
      <td>
        <div>Data 2</div>
      </td>
      <td>
        <div>Data 2</div>
      </td>
    </tr>

    <tr class="details">
      <td>
        <div>
          <a href="#">Link 3</a>
        </div>
      </td>
      <td>
        <div>Data 3</div>
      </td>
      <td>
        <div>Data 3</div>
      </td>
      <td>
        <div>Data 3</div>
      </td>
    </tr>
  </tbody>
</table>

<div class="pane hidden" id="detailsPane"></div>