javascript - 如何防止使用jquery在音频元素中单击播放按钮上的多个ajax调用？

Question

我正在尝试发送 ajax 请求以更新数据库中的值，一旦调用播放按钮，它就会将数据发送到处理页面以更新数据库。但问题是一旦点击播放按钮AJAX多次触发。我曾尝试使用标志来限制它，但没有奏效。

var requestSent = false;
var current_audio = document.getElementById("current_audio");
current_audio.addEventListener("play", function() {
   var data;
   var d = $('#update_counter').text();
   if (d == null)
      data = d;
   else
      data = 0;
   var date = $('#current_dat').text();
   if (!requestSent) {
      requestSent = true;
      $.ajax({
         url: "process.php",
         type: "POST",
         data: {
            data: data,
            date: date
         },
         async: false,
         cache: false,
         success: function(dataResult) {
            var dataResult = JSON.parse(dataResult);
            if (dataResult.statusCode == 200) {
               $("#update_counter").val(dataResult);
            } else if (dataResult.statusCode == 201) {
               alert("Error occured !");
            }
         },
         complete: function() {
            requestSent = false;
         },
      });
   }
});

根据评论的请求，我还添加了呈现的 HTML

<tr class="hidden" style="background-color:'.$result3["planet_color"].';border:1px solid black;padding:10px;color:white;">
<td start="'.strtotime($time_prev).'" finish="'.strtotime($time_next).'" style="padding:20px;">
                    <div class="row">
                        <div class="col-md-4 col-sm-12">
                                <p>
                                    <audio class="play_audio" controls loop>
                                       <source src="'.$result3["planet_mantra"].'" type="audio/mpeg">
                                       Your browser does not support the audio tag.
                                    </audio>
                                </p>
                                <p>Times Played :   
                                    <span id="current_dat" style="display:none;">'.$current_date.'</span> 
                                    <span id="update_counter"></span>
                                </p>
                                <p style="font-size:10px;">Location : <strong>'.$place.'</strong></p>

                        </div>
                    </div>

                    </td>

            </tr>

现在因为只有一个在 24 个元素中一次可见，所以我只想访问那个的播放按钮

标签： javascriptjqueryajax