• 131
• 255
• 14

How to code a delay in your javascript

by bernt & torsten

I have 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 different times, and I need a certain sequence as there is a relationship between the tables so if a new change has taken place in the remote server, I need 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;
         }
       }