Question

我试图确定用户按下某个键后的时间（秒）。这是输入框的值。

我希望在文本框的值发生变化时务实地调用updateData函数，但仅在onKeyUp的特定持续时间之后。

我正在检查value.length并在输入超过3个字符时调用updateData函数...是否有一种简单的方法可以确定onKeyUp之后的时间量？

<input id="location" onkeyup="delayUpdate()">

<script>

var input = document.getElementById("location").value;

function delayUpdate() {
    if (input.length > 2) {
        updateData();
    }
}

function updateData() {
    console.log(input);
}

</script>

Answer 1

听起来你正在寻找去抖动效果，以避免在每次击键时发送数据。

像这样的东西会那样做

var input = document.getElementById("location");
var timer = null;

input.addEventListener('keyup', delayUpdate, false);

function delayUpdate() {
    var self = this;

    clearTimeout(timer);

    timer = setTimeout(function() {
        if (self.value.length > 2) {
            updateData(self);
        }
    }, 1000); // a second

}

function updateData(input) {
    console.log(input.value);
}

FIDDLE

Answer 2

您可以跟踪按键的时间并将其与发布时间进行比较：

＆＃13;

var timer, interval;
var threshold = 2000; // 2 secs in this example

function delayUpdate() {
  console.log('key held for: ' + (new Date() - timer) + 'ms');
  if (timer && new Date() - timer > threshold) {
    updateData();
  }
  timer = false;
}

function updateData() {
  alert(document.getElementById("location").value);
}

function startTimer() {
  if (!timer)
    timer = new Date();
}

＆＃13;

<input id="location" onkeyup="delayUpdate()" onkeydown="startTimer()">

＆＃13;

确定用户按下键后的时间（onKeyUp）

2 个答案: