Javascript 将输入字段填充为零，但将其延迟一秒钟

我有一个日期选择器的输入字段-用户可以使用键盘输入分钟数，当他们输入的值小于10时，它将自动预加初始零-因此时间

10:1

看起来像

10:01

（有一个小时输入和一个分钟输入字段）-我遇到的问题是，它会立即显示零，因此很难编辑具有不同值的分钟字段-使用超时或类似方法延迟显示分钟函数的最佳方式是什么，以便在调用它时延迟执行一秒左右

// function to prepend 0 to a minute if the minute is under 10
Calendar.prototype.displayMinute = function (minute) {
   minute = (minute < 10) ? '0' + minute : minute;
   return minute;
};

template: "<input type=\"text\" (keyup)='updateMinuteInput($event)' [value]=\"displayMinute(currentMinute)\" >\n",

//如果分钟小于10，则函数将0前置到分钟
Calendar.prototype.displayMinute=功能（分钟）{
分钟=（分钟<10）？“0”+分钟：分钟；
返回分钟；
};
模板：“\n”，

您应该更新基础输入中的值，而不是更新显示的值

然后，您可以对输入事件使用去抖动，使其延迟

class Calendar {

  constructor() {
    this.updateMinuteInput = EventEmitter();
    this.updateMinuteInput.debounceTime(1000).do(() => this.padMissingZero)
  }


  // function to prepend 0 to a minute if the minute is under 10
  padMissingZero = function () {
     minute = this.value.split(':')[1];
     if (minute === null || minute === undefined) return;
     minute = parseInt(minute, 10);
     minute = (minute < 10) ? '0' + minute : minute;
     this.value = this.value.split(':')[0] + minute
  };
}

template: "<input type=\"text\" [value]="value" (keyup)='updateMinuteInput($event)'>\n",

课程日历{
构造函数（）{
this.updateMinuteInput=EventEmitter（）；
this.updateMinuteInput.debounceTime（1000.do）（（）=>this.padMissingZero）
}
//如果分钟小于10，则函数将0前置到分钟
padMissingZero=函数（）{
分钟=this.value.split（“：”）[1]；
if（分钟===null | |分钟===undefined）返回；
分钟=parseInt（分钟，10）；
分钟=（分钟<10）？“0”+分钟：分钟；
this.value=this.value.split（'：'）[0]+分钟
};
}
模板：“\n”，

---

有关更完整的示例，请参见，您应该更新基础输入中的值，而不是更新显示的值

然后，您可以对输入事件使用去抖动，使其延迟

class Calendar {

  constructor() {
    this.updateMinuteInput = EventEmitter();
    this.updateMinuteInput.debounceTime(1000).do(() => this.padMissingZero)
  }


  // function to prepend 0 to a minute if the minute is under 10
  padMissingZero = function () {
     minute = this.value.split(':')[1];
     if (minute === null || minute === undefined) return;
     minute = parseInt(minute, 10);
     minute = (minute < 10) ? '0' + minute : minute;
     this.value = this.value.split(':')[0] + minute
  };
}

template: "<input type=\"text\" [value]="value" (keyup)='updateMinuteInput($event)'>\n",

课程日历{
构造函数（）{
this.updateMinuteInput=EventEmitter（）；
this.updateMinuteInput.debounceTime（1000.do）（（）=>this.padMissingZero）
}
//如果分钟小于10，则函数将0前置到分钟
padMissingZero=函数（）{
分钟=this.value.split（“：”）[1]；
if（分钟===null | |分钟===undefined）返回；
分钟=parseInt（分钟，10）；
分钟=（分钟<10）？“0”+分钟：分钟；
this.value=this.value.split（'：'）[0]+分钟
};
}
模板：“\n”，

---

有关更完整的示例，请参见

屏蔽输入组件是实现这一点的最简单方法，计时器似乎非常笨重。我同意@AlexK的观点。更好的做法是使用屏蔽输入，这样用户在值发生变化时不会感到困惑。例如，你可以检查这个库：屏蔽输入组件是最简单的方法，计时器看起来很笨重。我同意@AlexK。更好的做法是使用屏蔽输入，这样用户在值发生变化时不会感到困惑。例如，您可以检查此库：