I have a timer & i want every time that the timer return to zero, an Ajax request send to the server and tell me how many coins does the user have and at the same time reduces 1 coin.
It works except the first time that Ajax sends the request to URL
Only for the first time it reduces 2 coins instead of 1 .
I just want to know the reason why this happen
the javascript code:
<script>
var timeout=false;
$(document).ready(function () {
match_timer();
})
</script>
<script>
function match_timer() {
var n = 5;
var tm = setInterval(countDown, 1000);
function countDown() {
n--;
document.getElementById('match-timer').innerHTML=n.toString();
if (n === 0) {
clearInterval(tm);
get_question();
timeout=true;
}
if(timeout===true){
timeout=false;
match_timer();
}
}
}
</script>
<script>
function get_question() {
$("#question").empty();
$.ajax({
url:'http://127.0.0.1:8000/get_another_question/',
method: 'POST',
data:{
"_token":"{{csrf_token()}}",
},
success:function (data) {
document.getElementById('question').innerHTML=data['title'];
$("#coin_balance").html(data['newCoinBalance']);
}
});
}
</script>
inside my laravel controller
public function getAnotherMatchQuestion()
{
$user_id=auth()->user()->id;
$user=AppModelsUser::find($user_id);
$coin=$user->coin_balance;
$coin-=1;
$user->coin_balance=$coin;
$user->save();
$question_id=mt_rand(1,15612);
$getMatchQuestion=QuizQuestion::find($question_id)->only(['question']);
$data=['title' => $getMatchQuestion['question'],
'newCoinBalance' => $coin];
return response()->json($data);
}
2
Answers
This is happening because Ajax is asynchronous operation, meaning, this would execute in a different thread and rest of the code would continue as normal without waiting for ajax call to finish. Double decrement might also be possible if 2 tabs are opened and request comes from both tabs simultaneously. To overcome this, you can make use of
transactions
. So your Laravel code would look like below:Note that this would be maintaining consistency of data, meaning number of request made is equal to number of requests served without any data loss.