JS global variable is not updating inside ajax

Question

This is my code:

I based the window variable from here

<script>
                $(window).on("load", function() {

                   function myForeverFunc(){
                       window.global_time = "3";
                       $.ajax({
                           url: "index.php?action=showReminder",
                           cache: false,
                           success: function(data){
                               if(data && data.charAt(0) === "1"){

                                    window.global_time = "1";
                               }else{
                                   console.log("test");
                                   window.global_time = "2";
                                }
                           }
                        });
                        console.log(window.global_time);
                    }
                   setInterval(myForeverFunc, 60*1000);
               });
           </script>

This just displays "3" where it should have been updated to "2" in the else part of the ajax function.

Nandan Bhat · Accepted Answer · 2017-09-26T08:58:17.350

3

Because Ajax call is Asynchronous.

i.e The contents/statements inside success:function(){} will be executed only after the response from the Ajax call is received.

If you put a console inside the success:function(data){}

 success: function(data){
      console.log("Data from Ajax request is received");
 }

"Data from Ajax request is received" will be logged after "3" is logged. I.e After response from server/request is received.

edited Sep 26 '17 at 08:58

answered Sep 26 '17 at 08:53

Nandan Bhat

1,573
2
9
21

but you can use async: false if you absolutly need the ajax done before continuying. Should probably read some stuff about that before adding async: false tho – user5014677 Sep 26 '17 at 09:07
@user5014677 Yes !. The synchronous option in AJAX is there for the small number of situations in which you can't use an asynchronous call but reloading the entire page is unnecessary. – Nandan Bhat Sep 26 '17 at 11:12

score 0 · Answer 2 · answered Sep 26 '17 at 08:54

Since $.ajax() Perform an asynchronous HTTP request, it will not return the data in the realtime, So you should move the console.log inside the success callback so it will be shown just when the result was returned from the server side :

$.ajax({
   url: "index.php?action=showReminder",
   cache: false,
   success: function(data){
      if(data && data.charAt(0) === "1"){

          window.global_time = "1";
      }else{
         console.log("test");
         window.global_time = "2";
      }

      console.log(window.global_time);
   }
});

Hope this helps.

score 0 · Answer 3 · answered Sep 26 '17 at 08:56

<script>
            $(window).on("load", function() {

               function myForeverFunc(){
                   window.global_time = "3";
                   $.ajax({
                       url: "index.php?action=showReminder",
                       cache: false,
                       success: function(data){
                           if(data && data.charAt(0) === "1"){

                                window.global_time = "1";
                           }else{
                               console.log("test");
                               window.global_time = "2";
                            }
                            console.log(window.global_time);
                       }
                    });

                }
               setInterval(myForeverFunc, 60*1000);
           });
       </script>

JS global variable is not updating inside ajax

3 Answers3