Função TextInput onKeyPress

#TextInput #onKeyPress #debounce #setTimeout

Dedicado a Andreas Kviby.

Se você já inspecionou o valor TexInput quando o manipulador de eventos onKeyPress() é acionado, provavelmente você ficou surpreso com a falta do último caractere inserido.

Tente você mesmo com o output console.log(). Algo assim:

export function input1_keyPress(event, $w) { 
   let val = $w('#input1').value;
   console.log(val); 
}

O output do console será sempre um caractere atrás.

Então o que acontece? Você só precisa esperar um pouco para que o valor seja atualizado. Use setTimeout() para introduzir um pequeno atraso:

export function input1_keyPress(event, $w) { 
   setTimeout(() => {
      let val = $w('#input1').value;
      console.log(val); 
   }, 10); // 10 milliseconds works for me
}

Eis que o output do console está correto toda vez que é acionado.

Mesmo que isso funcione, você pode precisar de um mecanismo de atraso mais robusto. Digamos, por exemplo, que você tenha uma rotina de autocompletar que consulte um banco de dados ou serviço de web externo. Se o usuário digitar muito rapidamente, isso poderá causar consultas sobrepostas, o que não é adequado. Então, podemos usar um mecanismo mais sólido - debounce:

let debounceTimer;
export function input1_keyPress(event, $w) {
   if (debounceTimer) {
      clearTimeout(debounceTimer);
      debounceTimer = undefined;
   }
   debounceTimer = setTimeout(() => {
      let val = $w('#input1').value;
      console.log(val);
      // some sort of query that might overlap execution 
   }, 500); // 500 milliseconds works for me, your mileage may vary
}

Como no simples método setTimeout() acima, isso introduz um atraso que permite que o campo de entrada atualize seu valor. No entanto, ele tem uma vantagem adicional na medida em que evita chamar a consulta de serviço muito rapidamente em sucessão. Pode ser necessário ajustar o tempo limite com base no serviço de consulta.

Agora você já pode começar.