title: (TYPESCRIPT) delay keyup for few seconds after user input
body: <p>Iam creating a form that require user to input times and get the average of the times when user typing. what i want to do is to make the function fires after user stop type not when the using is typing.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="time" [(ngModel)]="form.time2" (keyup)='averageT2($event, 1000)' placeholder="Time"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="number" [(ngModel)]="form.reading2" (keyup)='averageR2($event)' placeholder="Reading"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="time" [(ngModel)]="form.time3" (keyup)='averageT3($event, 1000)' placeholder="Time"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="number" [(ngModel)]="form.reading3" (keyup)='averageR3($event)' placeholder="Reading"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="time" [(ngModel)]="form.time4" (keyup)='averageT4($event, 1000)' placeholder="Time"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="number" [(ngModel)]="form.reading4" (keyup)='averageR4($event)' placeholder="Reading"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="time" [(ngModel)]="form.time5" (keyup)='averageT5($event, 1000)' placeholder="Time"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="number" [(ngModel)]="form.reading5" (keyup)='averageR5($event)' placeholder="Reading"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-label&gt;Time Average&lt;/md-label&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-label&gt;Reading Average&lt;/md-label&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="2" rowspan="1"&gt;
              &lt;md-label&gt;Equipment&lt;/md-label&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="text" placeholder="Time Average" value="{{ averageTime }}"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
            &lt;md-grid-tile colspan="1" rowspan="1"&gt;
              &lt;md-input-container class="example-full-width"&gt;
                &lt;input mdInput type="text" placeholder=" Reading Average" value="{{ averageRead }}"&gt;
              &lt;/md-input-container&gt;
            &lt;/md-grid-tile&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>averageT2(event) {
      var times = ['11:59:00 AM', '12:00:00 AM'];
      var count = times.length;
      var timesInSeconds =[];
      // loop through times
      for (var i = 0; i &lt; count ; i++){
        var pieces = times[i].split(':');
          var ampm = pieces[2].split(' ');
          var hrs = Number(pieces[0]);
          var mins = Number(pieces[1]);
          var secs = Number(ampm[0]);
          var ampm = ampm[1];
          // convert to 24 hr format (military time)
          if (ampm == 'PM') hrs = hrs + 12;
          // find value in seconds of time
          var totalSecs = hrs * 60 * 60;
          totalSecs += mins * 60;
          totalSecs += secs;
          // add to array
          timesInSeconds[i] = totalSecs;
      }
      // find average timesInSeconds
      var total = 0;
      console.log(timesInSeconds);
      for (var j =0; j &lt; count; j++) {
          total = total + Number(timesInSeconds[j]);
      }
      var avg = Math.round(total / count);
      console.log('avg secs: '+avg);
      // turn seconds back into a time
      var avgMins = Math.floor(avg/60);
      var avgSecs = avg - (60 * avgMins);
      var avgHrs = Math.floor(avgMins/60);
      console.log('hours: '+avgHrs);
      avgMins = avgMins - (60 * avgHrs);
      // convert back to 12 hr. format
      var avgAmpm = 'AM';
      if (avgHrs &gt; 12) {
          avgAmpm = 'PM';
          avgHrs = avgHrs - 12;
      }
      // add leading zeros for seconds, minutes
      avgSecs = ('0' + avgSecs).slice(-2);
      avgMins = ('0' + avgMins).slice(-2);
      // your answer
      return avgHrs+':'+avgMins+':'+avgSecs+' '+avgAmpm;
      alert(getAverageTime(times));
    }
  </code></pre>
  
  <p>i want to get the value after user finish typing.</p>