title: Ignore multiple successive function calls in Typescript from within the function?
body: <p>I am trying to implement <a href="https://docs.handsontable.com/5.0.1/demo-autocomplete.html#strict-ajax" rel="nofollow noreferrer">autocomplete using Handontable (Angular) by fetching data from the server</a> as the user types.</p>
  
  <p>I notice the API calls are made every time the user input changes but I would like to limit the number of API calls by waiting 1 second for the user to stop typing before making the call.</p>
  
  <p>I have done this in the past when I controlled the event by using <a href="https://medium.com/aviabird/rxjs-reducing-number-of-api-calls-to-your-server-using-debouncetime-d71c209a4613" rel="nofollow noreferrer">debounceTime</a> but not sure how to implement that here.</p>
  
  <pre><code>    ...
      column.source = function(query, callback) {
        $component.dataService.getValidValues().subscribe(
          arg =&gt; {
            callback(arg);
          },
          err =&gt; {
            ...
          }
        );
      }
      ...
  </code></pre>
  
  <p>Adding debounceTime(1000) here doesn't prevent multiple calls from happening.</p>
  
  <p><code>$component.dataService.getValidValues().debounceTime(1000).subscribe(...)</code></p>