javascript - 听众被反复添加，但不知道如何添加。我使用 one() 然后使用计时器在每次点击时重新启用它

Question

打开 JavaScript 控制台，激活以下代码片段，然后单击 Aqua 是/否按钮。说五次。它每次都能正确执行(只是打印一些内容到控制台)。然后单击任何其他按钮。它执行五次(至少)。然后，您可以单击第三个按钮以获得舞会频闪灯。

为什么？

我首先使用 one('click', processLike) 启用按钮的监听器，因此它只执行一次，然后删除监听器。然后，在处理点击(打印到控制台)后，监听器在 500 毫秒的暂停后重新建立。

var processLike = function()  {
   //The value of the "data-color_id" attribute.
   var color_id = $(this).data('color_id');
   console.log(color_id);
   /*
       Don't process requests too close together. Attack prevention.
    */
   var millsToIgnoreClicks = 500;
   console.log('Like disabled for: ' + millsToIgnoreClicks);
   setTimeout(function() {
      enableLikeListenerOnce();
   }, millsToIgnoreClicks);
};
$(document).ready(function()  {
   enableLikeListenerOnce();
});
var enableLikeListenerOnce = function()  {
   console.log("Like enabled");
   $('.td__toggle_color_like_button').one('click', processLike);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
      <tr>
         <th>Color</th>
         <th>Favorite?</th>
      </tr>
         <tr>
            <td class="td__color_name">aqua</td>
            <td id="toggle_color_like_cell_12" class="td__toggle_color_like_button" data-color_id="12">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">black</td>
            <td id="toggle_color_like_cell_13" class="td__toggle_color_like_button" data-color_id="13">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">blue</td>
            <td id="toggle_color_like_cell_14" class="td__toggle_color_like_button" data-color_id="14">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">fuchsia</td>
            <td id="toggle_color_like_cell_15" class="td__toggle_color_like_button" data-color_id="15">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">gray</td>
            <td id="toggle_color_like_cell_16" class="td__toggle_color_like_button" data-color_id="16">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">green</td>
            <td id="toggle_color_like_cell_17" class="td__toggle_color_like_button" data-color_id="17">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">lime</td>
            <td id="toggle_color_like_cell_18" class="td__toggle_color_like_button" data-color_id="18">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">maroon</td>
            <td id="toggle_color_like_cell_19" class="td__toggle_color_like_button" data-color_id="19">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">navy</td>
            <td id="toggle_color_like_cell_20" class="td__toggle_color_like_button" data-color_id="20">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">olive</td>
            <td id="toggle_color_like_cell_21" class="td__toggle_color_like_button" data-color_id="21">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">orange</td>
            <td id="toggle_color_like_cell_22" class="td__toggle_color_like_button" data-color_id="22">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">purple</td>
            <td id="toggle_color_like_cell_23" class="td__toggle_color_like_button" data-color_id="23">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">red</td>
            <td id="toggle_color_like_cell_24" class="td__toggle_color_like_button" data-color_id="24">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">silver</td>
            <td id="toggle_color_like_cell_25" class="td__toggle_color_like_button" data-color_id="25">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">teal</td>
            <td id="toggle_color_like_cell_26" class="td__toggle_color_like_button" data-color_id="26">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">white</td>
            <td id="toggle_color_like_cell_27" class="td__toggle_color_like_button" data-color_id="27">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">yellow</td>
            <td id="toggle_color_like_cell_28" class="td__toggle_color_like_button" data-color_id="28">
               <button class="button_unliked">No</button>
            </td>
         </tr>
   </table>

这是我在这里尝试使用的概念的一个简单演示:处理第一个请求，然后在 X 毫秒内忽略所有其他请求。之后，重新建立监听器。再次强调，在使用之前请打开控制台。

function onClick() {
    var ms = 2000;
    console.log('Disabled for: ' + ms);
    setTimeout(function() {
        console.log('Re-enabled');
        $(this).one('click', onClick);
    }, ms);
}

$('button').one('click', onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Link</button>

Answer 1

问题是你正在打电话

$('.td__toggle_color_like_button').one('click', processLike);

这将再次将点击绑定(bind)到具有类 td__toggle_color_like_button 的所有 dom 选择器，包括当前的点击按钮。

尝试以下操作(JavaScript 不同，HTML 相同)。

    var processLike = function()  {
       //The value of the "data-color_id" attribute.
       var color_id = $(this).data('color_id');
       console.log(color_id);
       /*
           Don't process requests too close together. Attack prevention.
        */
       var millsToIgnoreClicks = 500;
       console.log('Like disabled for: ' + millsToIgnoreClicks);
       var _this = this;
       setTimeout(function() {
          enableLikeListenerOnce(_this);
       }, millsToIgnoreClicks);
    };
    $(document).ready(function()  {
       $('.td__toggle_color_like_button').one('click', processLike);
    });
    var enableLikeListenerOnce = function(dom)  {
       console.log("Like enabled");
       $(dom).one('click', processLike);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
      <tr>
         <th>Color</th>
         <th>Favorite?</th>
      </tr>
         <tr>
            <td class="td__color_name">aqua</td>
            <td id="toggle_color_like_cell_12" class="td__toggle_color_like_button" data-color_id="12">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">black</td>
            <td id="toggle_color_like_cell_13" class="td__toggle_color_like_button" data-color_id="13">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">blue</td>
            <td id="toggle_color_like_cell_14" class="td__toggle_color_like_button" data-color_id="14">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">fuchsia</td>
            <td id="toggle_color_like_cell_15" class="td__toggle_color_like_button" data-color_id="15">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">gray</td>
            <td id="toggle_color_like_cell_16" class="td__toggle_color_like_button" data-color_id="16">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">green</td>
            <td id="toggle_color_like_cell_17" class="td__toggle_color_like_button" data-color_id="17">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">lime</td>
            <td id="toggle_color_like_cell_18" class="td__toggle_color_like_button" data-color_id="18">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">maroon</td>
            <td id="toggle_color_like_cell_19" class="td__toggle_color_like_button" data-color_id="19">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">navy</td>
            <td id="toggle_color_like_cell_20" class="td__toggle_color_like_button" data-color_id="20">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">olive</td>
            <td id="toggle_color_like_cell_21" class="td__toggle_color_like_button" data-color_id="21">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">orange</td>
            <td id="toggle_color_like_cell_22" class="td__toggle_color_like_button" data-color_id="22">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">purple</td>
            <td id="toggle_color_like_cell_23" class="td__toggle_color_like_button" data-color_id="23">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">red</td>
            <td id="toggle_color_like_cell_24" class="td__toggle_color_like_button" data-color_id="24">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">silver</td>
            <td id="toggle_color_like_cell_25" class="td__toggle_color_like_button" data-color_id="25">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">teal</td>
            <td id="toggle_color_like_cell_26" class="td__toggle_color_like_button" data-color_id="26">
               <button class="button_unliked">No</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">white</td>
            <td id="toggle_color_like_cell_27" class="td__toggle_color_like_button" data-color_id="27">
               <button class="button_liked">Yes</button>
            </td>
         </tr>
         <tr>
            <td class="td__color_name">yellow</td>
            <td id="toggle_color_like_cell_28" class="td__toggle_color_like_button" data-color_id="28">
               <button class="button_unliked">No</button>
            </td>
         </tr>
   </table>