title: Incorporating async actions, promise.then() and recursive setTimeout whilst avoiding "deferred antipattern"
body: <p>I have been reading up on methods to implement a polling function and found a great article on <a href="https://davidwalsh.name/javascript-polling" rel="nofollow noreferrer">https://davidwalsh.name/javascript-polling</a>. Now using a setTimeout rather than setInterval to poll makes a log of sense, especially with an API that I have no control over and has shown to have varying response times. </p>
  
  <p>So I tried to implement such a solution in my own code in order to challenge my understanding of callbacks, promises and the event loop. I have followed guidance outlined in the post to avoid any anti-patterns <a href="https://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern">Is this a &quot;Deferred Antipattern&quot;?</a>  and to ensure promise resolution before a .then() <a href="https://stackoverflow.com/questions/29699372/promise-resolve-before-inner-promise-resolved">promise resolve before inner promise resolved</a> and this is where I am getting stuck. I have put some code together to simulate the scenario so I can highlight the issues. </p>
  
  <p>My hypothetical scenario is this:
  I have an API call to a server which responds with a userID. I then use that userID to make a request to another database server which returns a set of data that carries out some machine learning processing that can take several minutes. </p>
  
  <p>Due to the latency, the task is put onto a task queue and once it is complete it updates a NoSql database entry with from <code>isComplete: false</code> to <code>isComplete: true</code>. This means that we then need to poll the database every <code>n</code> seconds until we get a response indicating <code>isComplete: true</code> and then we cease the polling. I understand there are a number of solutions to polling an api but I have yet to see one involving promises, conditional polling, and not following some of the anti-patterns mentioned in the previously linked post. If I have missed anything and this is a repeat I do apologize in advance.</p>
  
  <p>So far the process is outlined by the code below:</p>
  
  <pre><code>let state = false;
  const userIdApi = ()  =&gt; {
      return new Promise((res, rej) =&gt; {
    console.log("userIdApi");
    const userId = "uid123";
        setTimeout(()=&gt; res(userId), 2000)
      })
  }
  
  const startProcessingTaskApi = userIdApi().then(result =&gt; {
      return new Promise((res, rej) =&gt; {
      console.log("startProcessingTaskApi");
          const msg = "Task submitted";
        setTimeout(()=&gt; res(msg), 2000)
      })
  })
  
  const pollDatabase = (userId) =&gt; {
      return new Promise((res, rej) =&gt; {
    console.log("Polling databse with " + userId)
        setTimeout(()=&gt; res(true), 2000)
      })
  }
  
  
  Promise.all([userIdApi(), startProcessingTaskApi])
      .then(([resultsuserIdApi, resultsStartProcessingTaskApi]) =&gt; {
        const id = setTimeout(function poll(resultsuserIdApi){
          console.log(resultsuserIdApi)
          return pollDatabase(resultsuserIdApi)
          .then(res=&gt; {
              state = res
              if (state === true){
                clearTimeout(id);
                return;
                }
              setTimeout(poll, 2000, resultsuserIdApi);
              })
              },2000)
          })
  
  </code></pre>
  
  <p>I have a question that relates to this code as it is failing to carry out the polling as I need:</p>
  
  <p>I saw in the accepted answer of the post <a href="https://stackoverflow.com/questions/28250680/how-do-i-access-previous-promise-results-in-a-then-chain">How do I access previous promise results in a .then() chain?</a> that one should "Break the chain" to avoid huge chains of .then() statements. I followed the guidance and it seemed to do the trick (before adding the polling), however, when I console logged out every line it seems that <code>userIdApi</code> is executed twice; once where it is used in the <code>startProcessingTaskApi</code> definition and then in the <code>Promise.all</code> line. </p>
  
  <p>Is this a known occurrence? It makes sense why it happens I am just wondering why this is fine to send two requests to execute the same promise, or if there is a way to perhaps prevent the first request from happening and restrict the function execution to the <code>Promise.all</code> statement?</p>
  
  <p>I am fairly new to Javascript having come from Python so any pointers on where I may be missing some knowledge to be able to get this seemingly simple task working would be greatly appreciated.</p>