Advertisements

How to code a delay in your javascript

I been working on a user interface for a new sync function, that are syncing data from one server to another, to initiate the sync the user will be able to click a button on a webpage, I have built this interface using javascript with jquery.

The javascript is calling the server to initiate the sync with the remote server, the actual sync is using a RESTful API to request any changes to tables on the remote server. One issue that I discovered is that tables depending on size can finish a different times, and I need a certain sequence as their is relationship between the tables so if a new change has taken place in the remote server, I need to the tables sync to finish in a predefined order.

To make sure this works correctly, I had to build a delay function into my javascript, i wanted to delay the script execution not the jquery call, with jquery I can set a timeout value to finish – that would not help me with the sync issue.

Below is the code that I wrote to make the call to initiate the sync on the server, the success is reported back as a value in which the log then display to the user, in this scenario the 2nd call could finish before the first call.

     
getChanges: function(ship, modifiedSince, callback)
     {
        $.getJSON(baseURL + 'admin/sync/sync_curl/' + ship + '/ports',
        function(data)
        {
           if (data.success === true)
           {
             console.log(data);
             log("Updated with " + data + " records after " + modifiedSince);
             callback(data);
           }
       else {
           //only shows if the data object was returned
           log("No data to update Ports table");
       }
      });

      $.getJSON(baseURL + 'admin/sync/sync_curl/' + ship + '/rank',
        function(data)
        {
           if (data.success === true)
           {
             console.log(data);
             log("Updated with " + data + " records after " + modifiedSince);
             callback(data);
           }
       else {
           //only shows if the data object was returned
           log("No data to update Ports table");
       }
      });

In this 2nd scenario I have added a line of code and a new function to create the delay, before the 2nd call I have added delay(2000) – which will delay the execution of the 2nd call with 2 seconds, the value can be altered. At the end of the code snippet I have added the new function delay.

     getChanges: function(ship, modifiedSince, callback)
     {
        $.getJSON(baseURL + 'admin/sync/sync_curl/' + ship + '/ports',
        function(data)
        {
           if (data.success === true)
           {
             console.log(data);
             log("Updated with " + data + " records after " + modifiedSince);
             callback(data);
           }
       else {
           //only shows if the data object was returned
           log("No data to update Ports table");
       }
      });

      delay(2000);

      $.getJSON(baseURL + 'admin/sync/sync_curl/' + ship + '/rank',
        function(data)
        {
           if (data.success === true)
           {
             console.log(data);
             log("Updated with " + data + " records after " + modifiedSince);
             callback(data);
           }
       else {
           //only shows if the data object was returned
           log("No data to update Ports table");
       }
      });

      function delay(ms) {
         var cur_d = new Date();
         var cur_ticks = cur_d.getTime();
         var ms_passed = 0;
         while(ms_passed < ms) {
             var d = new Date();
             var ticks = d.getTime();
             ms_passed = ticks - cur_ticks;
         }
       }
Advertisements

2 comments On How to code a delay in your javascript

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Subscribe for updates

Enter your email address to subscribe to receive notifications of new content by email.

Join 5,882 other subscribers

Advertisements