[英]The fetch api in addEventListener only works once
addEventListener(click) 中的 fetch api 只工作一次。
HTML 代码:
<form action="/register/callback" method="post">
<input type="text" name="id" placeholder="id" value="${flash.id}" class="infoTp reg confIn" required />
<div id="useridConf">
<button type="button" class="infoSub conf" id="cfuserid">Id Confirm</button>
</div>
<input type="text" name="email" placeholder="email" value="${flash.email}" class="infoTp reg confIn" required />
<div id="emailConf">
<button type="button" class="infoSub conf" id="cfemail">Email Confirm</button>
</div>
<input type="password" name="pw" placeholder="password" value="${flash.pw}" class="infoTp reg" required />
<input type="password" name="pw2" placeholder="second password" value="${flash.pw2}" class="infoTp reg" required />
<input type="text" name="nickname" placeholder="nickname" value="${flash.nickname}" class="infoTp reg confIn" required />
<div id="nicknameConf">
<button type="button" class="infoSub conf" id="cfnickname">Nickname Confirm</button>
</div>
<div id="borderReg" class="reg">
<input type="submit" name="signup_submit" value="Register" class="infoSub" id="regBtn" />
</div>
</form>
JavaScript 代码:
let confs = document.getElementsByClassName('conf');
let confIns = document.getElementsByClassName('confIn');
if (confs) {
for(let i = 0; i < confs.length; i++) {
confs[i].addEventListener('click', function() {
if (confIns[i].value) {
fetch(`/confirm?${confs[i].id.slice(2)}=${confIns[i].value}`).then(function(response){
response.text().then(function(text){
if (document.getElementById(`${confs[i].id.slice(2)}Span`)) {
document.getElementById(`${confs[i].id.slice(2)}Span`).parentNode.removeChild(document.getElementById(`${confs[i].id.slice(2)}Span`));
}
document.getElementById(`${confs[i].id.slice(2)}Conf`).innerHTML += text;
console.log('fin');
});
});
}
console.log("hello");
});
}
}
获取代码完成后,事件监听器不起作用。 如何多次获取?
Fetch 是异步的,因此它可能在 for 循环也在运行时仍在运行。 您可以将 for 循环转换为 while function。
i = 99999999999999999999...
if(confs){
i = 0
while (i<confs.length){
blah...
fetch(...).then(()=>{blah...i+=1})
...blah
}
}
i = 99999999999999999999...
然后使用 fetch().then(()=>{i+=1})。 这使得 function 等待获取完成,然后再继续下一个值。 它可能会解决您的问题。
但是,这可能会导致更多问题,并且可能会使调试变得更加困难。 所以我建议寻找一种方法让 function 更加同步。 如果您确实找到了方法,请不要忘记编辑帖子以帮助其他人寻找解决方案。 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.