Angular-添加事件侦听器“输入”并防止用户向密钥发送垃圾邮件答案

【问题标题】：Angular- Adding event listener "input" and prevent user from spamming a keyAngular-添加事件侦听器“输入”并防止用户向密钥发送垃圾邮件
【发布时间】：2022-01-31 06:18:55
【问题描述】：

我正在使用 Angular、Javascript、Typescript 和 Ionic。我有一个函数 createDropdown(inputField, arrayOfItems) ，它将一个下拉列表附加到正在传递的输入字段，并使用提供的数组填充下拉列表。

这将用作“自动完成”下拉菜单，这就是为什么我需要添加一个事件侦听器“输入”，所以它看起来像这样：

createDropdown(inputField, arrayOfItems){
  inputField.addEventListener("input",()=>{
  //Logic to create dropdown
  });
}

问题在于，在将事件侦听器添加到输入字段后，如果用户例如从键盘向“A”键发送垃圾邮件，则会产生延迟或延迟，最终应用程序崩溃。有没有办法防止这种情况发生？我试过“keyup”，它修复了它。但是，这样，按键盘上的任意键都会触发 createDropdown 函数，例如：按“Control”或“Alt”。

最终结果应该是，让用户在输入字段中输入，然后匹配的结果应该显示在下拉列表中，以便用户可以从中选择。他们输入的越多，结果就越准确。

【问题讨论】：

我假设关键监听器正在触发 API 调用或什么？如果您使用 rxjs，则有 debounce 运算符来拒绝彼此太接近的事件。将其放入接收事件并导致 API 调用的管道中。
关键侦听器仅获取/过滤已存储在内存中的数据并使用该数据填充下拉列表。我试图在事件监听器中返回一个承诺。我使用的是 promise 而不是 observable，因为订阅和取消订阅可能会很麻烦。对于去抖动，我需要使用 .debounce(time).subscribe() 对吗？
是的，比如让事件监听器发送到EventEmitter 或类似的东西，然后执行emitter.pipe(debounce(time)).subscribe()。至少我以前见过类似的问题是这样解决的。

标签： javascript html angular typescript ionic-framework

【解决方案1】：

您可以使用例如 setTimeout() + 微调器的实现。

这里是我的意思的一个例子

https://stackblitz.com/edit/how-to-trigger-an-event-in-input-text-after-i-stop-typingwritin

【讨论】：

这可以防止用户在 UI 上发送垃圾邮件但是，我的意思是用户应该能够做到这一点，我只是不希望那个特定的键调用我的createDropdown() 函数多次，因为这会导致问题。
我最终使用了 setTimeout(()=>) 和一个计时器，每次用户按下一个键时都会重置，增加了几毫秒的延迟

【解决方案2】：

您要查找的内容称为“去抖动输入”。看这里：https://stackoverflow.com/a/36849347/4088472

【讨论】：