Javascript 延迟触发错误的元素单击

我有一个例子，其中名为

both

的按钮专门触发两个单独元素（第一个和第二个按钮）的单击。在正常情况下，每个元素监听器都会被正确触发，但是当监听器函数中添加了任何类型的延迟（例如AJAX调用）时，第二个元素会被触发两次，即使第一次和第二次调用都有一个显式的id触发器

在示例中，单击名为

both

的按钮，可以看到只有第二个按钮被触发两次

$（“#按钮”）。在（'click'，'allow'，function（）上{
id=$（this.attr（'id'）；
setTimeout（函数（）{
console.log（id）；
}, 2000);
});
$（'#两者'）。在（'click'，function（）上{
trigger（）和trigger（）；
});
函数triggerDuth（）{
first=$（“#first”）；
秒=$（“#秒”）；
第一个.addClass（'allow'）；
首先，单击（）；
首先，removeClass（'allow'）；
第二，addClass（'allow'）；
第二，点击（）；
第二，removeClass（'allow'）；
}

第一
第二
两者都

当前逻辑的

id

是全局声明的，因此当您触发单击第二个按钮时，它将设置为

first

，然后立即更新为

second

。当超时2秒后触发时，它将打印

id

的值两次，每个按钮一次

单击

事件。此时，

id

的值现在设置为

second

要解决此问题，您可以在

的范围内声明
id
。允许
单击处理程序函数：


$（“#按钮”）。在（'click'，'allow'，function（）上{
让id=$（this）.attr（'id'）；//或var id或const id。。。
setTimeout（函数（）{
console.log（id）；
}, 2000);
});
$（'#两者'）。在（'click'，function（）上{
trigger（）和trigger（）；
});
函数triggerDuth（）{
让$first=$（“#first”）；
设$second=$（“#second”）；
$first.addClass（'allow'）；
$first.click（）；
$first.removeClass（'allow'）；
$second.addClass（'allow'）；
$second.click（）；
$second.removeClass（'allow'）；
}

第一
第二
两者都

您正在覆盖您的id，因为它由相同的函数调用更新。
您可以将它们保存在ids数组中或使用
let

varids=[]；
$（“#按钮”）.on（'click'，'allow'，function（）{
log（'clicked'，$（this））；
id.push（$（this.attr（'id'））；
setTimeout（函数（）{
控制台日志（ids）；
}, 1000);
});
$（'#两者'）。在（'click'，function（）上{
trigger（）和trigger（）；
});
函数triggerDuth（）{
first=$（“#first”）；
秒=$（“#秒”）；
第一个.addClass（'allow'）；
首先，单击（）；
首先，removeClass（'allow'）；
第二，addClass（'allow'）；
第二，点击（）；
第二，removeClass（'allow'）；
}