Question

我创建了一个表单，要求用户输入时间并获得用户输入时的平均值。我想要做的是在用户停止输入后激活该功能，而不是在使用输入时触发。

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

我希望在用户完成输入后获得该值。

Answer 1

符合我需要的正确方法是从(keyup) =＆gt;更改(change)。这是我最好的答案

Answer 2

检查一下 http://embed.plnkr.co/kM9aQC/

你的变量名字给了我这个想法。

按您的意愿做延迟：

你只需要设置一个超时并比较一下是否有动作使用辅助变量的已用时间。

我在我的例子中使用了它的功能，就好像你可以在通过文本框计算每分钟的动作时设置难度。在所建立的时间内没有任何行动，而你已经失去了＃34;并显示结果。

PD。我包括JQuery但我认为我没有使用它。适应你的场景，它只是JS。

（TYPESCRIPT）用户输入

2 个答案: