Javascript -文档keyup事件-获得整个字符串一旦延迟(超时)完成

Question

我正在尝试构建以下功能:

当选项卡处于活动状态时，用户可以在键盘上键入数字，这个数字可以是几个数字。如何在键up之间的延迟时间后获得整数?事件结束了吗?

我写了下面的代码，但是我得到了缓冲区每个keyup，我只需要得到最后的结果。我做错了什么?

目前的代码:

const delay = 1000
const keystrokeDelay = delay;
let state = {
buffer: [],
lastKeyTime: Date.now()
};
document.addEventListener('keyup', event => {
const key = event.key;
const currentTime = Date.now();
let buffer = [];
if (currentTime - state.lastKeyTime > keystrokeDelay) {
buffer = [key];
} else {
buffer = [...state.buffer, key];
}
state = {buffer: buffer, lastKeyTime: currentTime};
});

Answer 1

我已经编写了以下代码，但我正在获得每个缓冲区我只需要得到最终结果。我做错了什么?

你可以利用setTimeout和clearTimeout。

const delay = 1000
const keystrokeDelay = delay;
let keyTimeout = null;
let state = {
buffer: [],
lastKeyTime: Date.now()
};
document.addEventListener('keyup', event => {
window.clearTimeout(keyTimeout);
const key = event.key;
const currentTime = Date.now();
let buffer = [];
if (currentTime - state.lastKeyTime > keystrokeDelay) {
buffer = [key];
} else {
buffer = [...state.buffer, key];
}
state = {buffer: buffer, lastKeyTime: currentTime};
keyTimeout = window.setTimeout((wholeString) => console.log(wholeString), delay, buffer.join(''))
});

Answer 2

试试这个debouncefoo

const input = document.getElementById('input')
function debounce(func, timeout = 1000){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function submit(){
console.log('Saving data', input.value);
}
input.addEventListener("keyup", debounce(submit));

<input type="text" id="input" />