如何解决如何设置第二次触发侦听器事件之前的延迟
我正在测试一些代码,以检查输入是否包含字符串。它工作正常,但是当我快速键入时,它会被触发两次!有人可以解释为什么以及如何解决它吗?
var inputSelector = document.querySelector('input[name="category"]');
inputSelector.addEventListener('keyup',function(){
var inputNaam = inputSelector.value;
inputNaam.toLowerCase();
if(inputNaam.length === 9 && inputNaam.includes('baardzorg')){
console.log('match')
}
})
我认为发生这种情况是因为,如果我快速键入,我将在完成键入“ baardzorg”后释放最后两个键。如何防止这种情况发生?
解决方法
您的代码中的问题:
快速键入时,往往会同时释放两个键(baardzorg的r和g)(通常情况下不会发生这种情况)。按下并保持键在一起可以重现该问题。有两个keyup事件,在这两种情况下,该事件都匹配并且触发console.log。
已解决:
如果要使用“键”实现此目的,则可以使用称为反跳的概念。您只需要在输入出现延迟时才调用该函数,确切地说是用户已停止输入几毫秒。这些通常用于搜索引擎中,因为它们不会为每个键入的单词调用api(用于获得频繁搜索的单词)或在电子商务搜索中列出产品),为每个搜索到的单词调用一个api会花费很多。一旦键入延迟,它将调用api。请参见下面的代码:
var inputSelector = document.querySelector('#fname');
const findMatch = () => {
var inputNaam = inputSelector.value;
inputNaam.toLowerCase();
if(inputNaam.length === 9 && inputNaam.includes('baardzorg')){
console.log('match')
}
}
const debounce = function (fn,d) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
findMatch.apply();
},d);
}
}
const onFinishTyping = debounce(findMatch,300);
<input type="text" id="fname" onkeyup="onFinishTyping()" name="fname"><br><br>
,
您应该使用onChange
或onBlur
而不是keyup
事件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。