title: Handling multiple Observables and functions
body: <p>On selection of particular collection from list, I have to fetch headers using http call. Some times observable respond quickly and data gets populated as expected but many times when observable takes time. If we wait for observable to respond, it works as expected but when selection of collection switched quicky, because first observable has not yet responded and new one is fired, createHeader() gets messedup completely.</p>
  
  <p>I have read many articles and got to know that debounceTime helps here to hold observable. I have tried but didn't work. </p>
  
  <pre><code>  selectCollection(){
      console.log('Selected Collection :', this.selectedCollection)
      this.buildURL();
      console.log('URL :', this.url1)
      this.columnDefs = [];
      this.getHeader()
    }
  
    buildURL(){
      this.url1 = this.prefixURL + JSON.stringify(this.selectedCollection)
    }
  
    getHeader(){
      let recordsObs$ = this.httpService.ajaxCall('GET', this.url1, this.reqData)
      recordsObs$.subscribe(data =&gt; {
        console.log('Records :',data)
        this.records = data
        this.createHeader(this.records[0])
      })
    }
  
    createHeader(records){
      this.columnDefs.push(this._header)
      console.log('create Header',records)
      records.fields.forEach(field =&gt; {
        console.log(field)
        var header = new Header();
        header.headerName = field.fieldLabel
        header.field = field.fieldName
        header.width = 150
        this.columnDefs.push(header)
      })
      this.gridOptions.api.setColumnDefs(this.columnDefs)
    }
  </code></pre>
  
  <p>Expected result is: If I quickly switch the items from the list, all previous observable should be discarded and only the latest data should get utilised for createHeader().</p>