jquery - Javascript variable values are automatially changed to NaN and my script fails -

i have following requirement in project, after page loads, have make async call web service (using jquery) takes takes around 1 5 seconds execution. there next button in same page, , when user clicks next button before call completed, page navigation should kept on hold. btw project works on ie 8 version.

in mean time there third party calls happening in same page. triggered in parallel above ajax call , waiting time around 2 seconds.

so wrote logic in such way when user clicks on next button, first verify 2 seconds wait time , waits 5 seconds ajax call complete. if ajax call completes in less 5 seconds (eg. 1 or 2 sec) remaining waiting time skipped , user navigated next page.

following code

<script type="text/javascript">      var callstatus = "pending";       // ajax call status pending     var holdnavigation = true;                      // true     var debug = false;      // set debug value if set int web.config     <% #if debug %>     debug = true;     <% #endif %>      function callasyncmethod() {         // make call if flag set in page load         if ($("#<%= hiddenmakeasynccall.clientid %>").val() == "true") {             log("async call started.");             $.ajax({                 type: "get",                 url: "webservice.asmx/dosomething",                 contenttype: "application/json; charset=utf-8",                 datatype: "json",                 async: true,                 success: function (response) {                     log("async call completed status - " + response.d.status);                     callstatus = response.d.status;                     holdnavigation = false;                 },                 error: function (xhr, textstatus, errorthrown) {                     log("async call failed.")                     callstatus = "error";                     holdnavigation = false;                     log(errorthrown);                 }             });         }         else {             holdnavigation = false;             callstatus = "notrequired";         }     }      var delayinterval = 500;     var timeelapsed = 0;     var simulatenextbuttonclick = false;      // next button validation function     function validatenextbuttonclick() {         if (!isthirdpartycallwaitingtimecompleted() || (holdnavigation && !isasynccallcompleted())) {             if (timeelapsed == delayinterval * 10) {                 holdnavigation = false;                 log("async call timed out.");             }             else {                 log("time elapsed after next button click " + timeelapsed + " milliseconds.");                 timeelapsed += delayinterval;                 settimeout(validatenextbuttonclick, delayinterval);                 simulatenextbuttonclick = true;                 return false;             }         }          if (simulatenextbuttonclick) {             simulatenextbuttonclick = false;             log("simulating next button click cancelled previously.");             $("#<%= nextbutton.clientid %>").click();         }          log("navigating next page.");         return true;     }      // waiting time third party call complete 2 seconds,     // check whether 2 seconds completed or not.     function isthirdpartycallwaitingtimecompleted() {         var afterthirdpartycallloadedtime = (new date().valueof() - thirdpartycallloadedtime) / 1000;          if (afterthirdpartycallloadedtime >= 2) {             log("third party calls completed.");             return true;         }          log("waiting third party calls complete.");         return false;     }      // check whether async call pending or not     function isasynccallcompleted() {         if (callstatus == "pending") {             log("waiting async call complete.");             return false;         }         else if (callstatus == "notrequired") {             log("async call not required.");             return true;         }          log("async call completed.");         return true;     }      // logs message console if debug flag set true     function log(message) {         if (debug) {             $('#log').append(message + "<br/>");             //window.console.log(message);         }     } </script> 

code

        </p>         <asp:button id="nextbutton" runat="server" text="next" onclick="nextbutton_click" onclientclick="return validatenextbuttonclick()" />         <br />         third party calls happen here         <script type="text/javascript">             var thirdpartycallloadedtime = new date().valueof();         </script>          <asp:hiddenfield id="hiddenmakeasynccall" runat="server" value="true" />     </div> </form> <script type="text/javascript">     callasyncmethod(); </script> 

this code working when test in new application, not working when try in project. works if open developer tool window in ie. when debugged found variables interval , timeelapsed automatically changed nan

please me in solving issue. let me know if there better way implement did.