Я пытаюсь отправить 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 элементов виден только один элемент, я хочу получить доступ к кнопке воспроизведения только