(TYPESCRIPT) delay keyup for few seconds after user input

Question

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.

HTML

<md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="time" [(ngModel)]="form.time2" (keyup)='averageT2($event, 1000)' placeholder="Time">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="number" [(ngModel)]="form.reading2" (keyup)='averageR2($event)' placeholder="Reading">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="time" [(ngModel)]="form.time3" (keyup)='averageT3($event, 1000)' placeholder="Time">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="number" [(ngModel)]="form.reading3" (keyup)='averageR3($event)' placeholder="Reading">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="time" [(ngModel)]="form.time4" (keyup)='averageT4($event, 1000)' placeholder="Time">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="number" [(ngModel)]="form.reading4" (keyup)='averageR4($event)' placeholder="Reading">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="time" [(ngModel)]="form.time5" (keyup)='averageT5($event, 1000)' placeholder="Time">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="number" [(ngModel)]="form.reading5" (keyup)='averageR5($event)' placeholder="Reading">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-label>Time Average</md-label>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-label>Reading Average</md-label>
          </md-grid-tile>
          <md-grid-tile colspan="2" rowspan="1">
            <md-label>Equipment</md-label>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="text" placeholder="Time Average" value="{{ averageTime }}">
            </md-input-container>
          </md-grid-tile>
          <md-grid-tile colspan="1" rowspan="1">
            <md-input-container class="example-full-width">
              <input mdInput type="text" placeholder=" Reading Average" value="{{ averageRead }}">
            </md-input-container>
          </md-grid-tile>

component.ts

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 < 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 < 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 > 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));
  }

i want to get the value after user finish typing.

deanz · Accepted Answer · 2017-04-25 03:00:33Z

1

the correct way that suitable with my need is change from (keyup) => (change). this is my best answer

answered Apr 25, 2017 at 3:00

deanz

1662 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam · Accepted Answer · 2017-04-20 15:37:10Z

0

Check it http://embed.plnkr.co/kM9aQC/

Your names of the variables gave me the idea.

To do a delay as you wish:

You just need to set a timeout and compare if have been actions in the elapsed time with a helper variable.

I used it feature to do in my example as if you can set difficulty while calculating the actions per minute through a text box. No actions in the time established supposed "you lost" and result is shown.

PD. I included JQuery but I think I am not using it. Adapt it to your scenario, It is just JS.

edited Apr 20, 2017 at 15:37

answered Apr 20, 2017 at 3:38

Sam

1,4572 gold badges20 silver badges34 bronze badges

1 Comment

deanz Over a year ago

tq for your answer..but i had found the best way to do it

Collectives™ on Stack Overflow

(TYPESCRIPT) delay keyup for few seconds after user input

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related