title: Calling multiple Ajax functions in conjunction with SetInterval
body: <p>I have a set of printers associated with different devices. Every 20 seconds I check the status of the printers and display their status (offline, online, out of paper, etc.). User can select a device from a &quot;Devices&quot; dropdown and get status of printers associated with that device; the default on page load is &quot;all devices&quot;.</p>
  <p>So, there are two parts to getting status: get list of printers for selected device; get status for that list of printers.</p>
  <p>To do this I use setInterval function within which I call an Ajax function to get the status.</p>
  <p>I am having trouble getting two ajax functions (get device's printers and get printers' status) working in conjunction with setInterval. Getting the list of printers needs to be done once (or until device is changed), getting status needs to be done every 20 seconds.</p>
  <p>I think using promise is the way to do it (I could be wrong) but it doesn't work properly. I need some expert assistance.</p>
  <p>This is what I have tried but it seems both ajax functions are executed every 20 seconds.</p>
  <pre><code>var statusParameters;
  var printers = [];
  var mpeName;
  var v;
  var pm;
  
  function printer(idn, hostName, ipAddress) {
      this.IDN = idn;
      this.HostName = hostName;
      this.IPAddress = ipAddress;
  }
  
  $(document).ready(function () {
      statusParameters = {
          interval: 20000,
          interval_id: 0,
          intervalDetail_id: 0,
      };
      ...
      mpeName = '';  // denotes all printers; when user selects a device this value changes
      fetchStatusData();
  
      statusParameters.interval_id = setInterval(function () {
          fetchStatusData()
      }, statusParameters.interval);
  
      // Get list of printers for selected device
      pm =
          $.ajax({
              type: &quot;POST&quot;,
              dataType: &quot;json&quot;,
              contentType: &quot;application/json; charset=utf-8&quot;,
              url: 'Services/ps.asmx/GetPrinterMappingCfg',
              cache: false,
              data: JSON.stringify({ MPEName: mpeName }),
          }).done(function (result) {
              jResult = JSON.parse(result.d);
  
              $.each(jResult, function (index, value) {
                  var p = new printer(value.IDN, value.Hostname, value.IPAddress);
                  printers.push(p);
              });
  
          }).fail(function (jqXHR, textStatus, errorThrown) {
              alert(textStatus + ' - ' + errorThrown + '\n' + jqXHR.responseText);
          });
      })
  
      function fetchStatusData() {
          // I tried to put the above &quot;pm&quot; right here too
  
          $.when(pm)  
              .done(function (r1) {
                  $.each(printers, function (index, value) {
                      var currPrinter = value;
                      $.ajax({
                          type: &quot;POST&quot;,
                          dataType: &quot;json&quot;,
                          contentType: &quot;application/json; charset=utf-8&quot;,
                          url: &quot;Services/ps.asmx/GetPrinterStatus&quot;,
                          cache: false,
                          //data: &quot;&quot;,
                          data: JSON.stringify({ PrinterIPAddress: currPrinter.IPAddress }),
                      }).done(function (result) {
                          // initial display or updating of status info
                      }).fail(function (jqXHR, textStatus, errorThrown) {debugger
                          ...
                      });
                  });
                  printers.length = 0;  // because every 20 sec. it retrieves printer list!
              }).fail(function (jqXHR, textStatus, errorThrown) {debugger
                ...
              }); 
  </code></pre>
  <p>The problem I am trying to solve is I want the retrieving of list of printers to be done once, or until user selects a different device not every 20 seconds. It is a waste to keep getting the same printer list every 20 seconds.</p>
  <p>Also, the way it is now, on initial page load it does not display printers and their status but will after 20 seconds. It will print on initial load if I move &quot;pm&quot; inside of &quot;fetchStatusData&quot; function.</p>
  <p><strong>Update</strong></p>
  <p>I think I might not have explained what I am trying to do properly. Basically, this is what I am after:</p>
  <pre><code>Given list of devices in a dropdown list, with &quot;All Devices&quot; selected on page load
  Get list of printers for selected device from dropdown
  Repeat the following every 20 seconds
      Get status of each printer in list of printers
  
  When user selects a new device, get list of printers again
  </code></pre>
  <p>I was thinking another way might be to create a array of &quot;device&quot; objects, each having an array of printer objects in addition to other properties like DeviceID, etc.</p>
  <p>This is done only once on document.ready(). Then when a new device is selected, I already have the list of printers and can get it that way. Still would get stuck in setInterval portion of it.</p>