title: Why is my promise returning undefined?
body: <h1>Background</h1>
  
  <p>I am trying to make a function that delays the execution of asynchronous functions by X ms. </p>
  
  <p>For the purposes of this demonstration, the following is the async function, which takes an URL:</p>
  
  <pre><code>/*
   *  This is a simulation of an async function. Be imaginative! 
   */
  let asyncMock = function(url) {
      return new Promise(fulfil =&gt; {
  
          setTimeout(() =&gt; {
              fulfil({
                  url,
                  data: "banana"
              });
          }, 10000);
  
      });
  };
  </code></pre>
  
  <h1>Objective</h1>
  
  <p>My objective here is to have a function, that will take the <code>url</code> argument of <code>asyncMock</code> and then call it every X ms or until there are no more arguments left.</p>
  
  <p>Basically, I want every invocation of <code>asyncMock</code> to be separated by X ms.</p>
  
  <p>As an example, imagine I call <code>asyncMock</code> 20 times in a row. Normally, those 20 calls would be done immediately. What I want, it to make sure that there is Xms of delay between each of the 20 calls. </p>
  
  <h1>Tentative</h1>
  
  <p>My idea to solve this, is to have a factory, that will return a <a href="https://www.npmjs.com/package/promise" rel="nofollow noreferrer">promise</a> that will execute the function after X ms. </p>
  
  <pre><code>let throttleFactory = function(args) {
  
      let {
          throttleMs
      } = args;
  
      let promise = Promise.resolve();
  
      let throttleAsync = function(url) {
  
          return promise.then(() =&gt; {
  
              setTimeout(anUrl =&gt; {
                  return new Promise( fulfil =&gt; {
                      fulfil(asyncMock(anUrl));
                  });
              }, throttleMs, url);
          });
      };
  
      return Object.freeze({
          throttleAsync
      });
  };
  </code></pre>
  
  <p>Ideally I would use this factory like in the example bellow:</p>
  
  <pre><code>let throttleFuns = throttleFactory({
      throttleMs: 2000
  });
  
  console.log('running');
  
  throttleFuns.throttleAsync('http://www.bananas.pt')
      .then(console.log)
      .catch(console.error);
  
  throttleFuns.throttleAsync('http://www.fruits.es')
      .then(console.log)
      .catch(console.error);
  
  throttleFuns.throttleAsync('http://www.veggies.com')
      .then(console.log)
      .catch(console.error);
  // a ton of other calls in random places in code
  </code></pre>
  
  <h1>Problem</h1>
  
  <p>The problem here is that my <code>throttleAsync</code> fucntion outputs <code>undefined</code> three times immediately. I believe this might be because I am not defining <code>promise</code> properly.</p>
  
  <h1>Question</h1>
  
  <p>How can I fix this code to work as intended?</p>