Javascript 单击时速度过快时未删除数组元素

大家好，我有一个输入框，每当用户单击addword按钮时，它会将val文本作为锚定标记添加到rendereddiv中。一旦添加了元素，用户应该能够在单击它们时删除每个元素。事情是这样的，但是如果你点击它们的速度太快，DOM元素将在前端被删除，但不是全部从数组中删除

您可以在

console.log（“删除后：”，arr）

中看到这一点

有什么建议吗

var关键字=[]
$（“按钮”）。单击（功能（e）{
var key=$（“#”+“inputText”）.val（）；
关键词.推送（键）
addOnDiv（关键字）
removeKeywordOnClick（关键字，“渲染”）
});
函数addOnDiv（arr）{
var formatedKeywords=''；
对于（变量i=0；ia”）。单击（（evt）=>{
变量索引=$（evt.target）.children（）.attr（“数据值”）
$（evt.target）.remove（）
阵列拼接（索引1）；
日志（“删除后：”，arr）
$（“#”+“inputText”）.val（“”）
})
}

加词

基本上，发生的事情是，你有多个真相的来源，它们正在失去同步

“关键字”数组用于在添加单词时设置显示的单词列表，但在删除单词时，直接删除单击的DOM元素，然后通过在函数之间传递对它的引用（如

arr

）间接更新“关键字”。（您会注意到，如果您快速删除一堆单词，然后添加一个，那么仍然停留在

关键字中的“额外”单词将重新插入DOM。）

在这里，我将其简化为一个事实来源：一切都直接基于
关键字
数组运行，函数之间不传递数组引用，单击的元素也不会直接删除（而是
addOnDiv（）第二次调用
，根据
关键字
数组重新绘制整个列表


var关键字=[]
$（“按钮”）。单击（功能（e）{
var key=$（“#”+“inputText”）.val（）；
关键词.推送（键）
addOnDiv（）
removeKeywordOnClick（“渲染”）
});
函数addOnDiv（）{
var formatedKeywords=''；
对于（变量i=0；ia”）。单击（（evt）=>{
变量索引=$（evt.target）.children（）.attr（“数据值”）
//$（evt.target）.remove（）
关键词：剪接（指数1）；
addOnDiv（）；
removeKeywordOnClick（“渲染”）
日志（“删除后：”，关键字）
$（“#”+“inputText”）.val（“”）
})
}

加词
使用将大大简化此代码。我无法重新创建您的问题。但是，如果您在添加的代码中单击这些问题太快，则不会发生这种情况。我猜您在这里遇到了其他问题。请创建一个问题的列表。请尝试插入hello并多次单击“添加单词”按钮，以便获得更多帮助los将出现在上面。然后快速单击每个los，以便在DOM中删除它们。但是，您将在下面的输出中看到，删除后的数组不会为空，尽管它们不会出现在HMTL中。。。