Issue on Assigning Value Global Variable in jQuery Ajax

Question

I have a script and jQuery Ajax call like:

<script type="text/javascript">
 $(document).ready(function() {
  var timer;
  $.ajax({
     type: 'POST',
         url: 'closettime.php',
         success: function( res ){
         var json = JSON.parse(res);
             timer = json["datecounter"];
             alert(timer);
         }
    });   
 var date = new Date(timer);
 var now   = new Date();                
 var diff  = date.getTime()/1000 - now.getTime()/1000;
 var clock = $('.clock').FlipClock(diff, {
    clockFace: 'HourlyCounter',
    countdown: true,
    showSeconds: true
 });

});
</script>

now my problem is I am not able to assign the time value in var date = new Date(timer); in ajax success callback as

timer = json["datecounter"];

can you please let me know how to fix this? thanks

Answer 1

The issue is likely that the request does not finish completing until after the code to assign your date variable completes, so there is the illusion that timer is not being assigned. Move all of your code that depends on the timer variable into the callback and this should work, or at least fix one of the issues.

<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
       type: 'POST',
       url: 'closettime.php',
       success: function( res ){
           var json = JSON.parse(res);
           var timer = json["datecounter"];
           alert(timer);
           var date = new Date(timer);
           var now   = new Date();                
           var diff  = date.getTime()/1000 - now.getTime()/1000;
           var clock = $('.clock').FlipClock(diff, {
              clockFace: 'HourlyCounter',
              countdown: true,
              showSeconds: true
           });
       }
    });
});
</script>