addEventListener 中的 fetch api 只工作一次答案

【问题标题】：The fetch api in addEventListener only works onceaddEventListener 中的 fetch api 只工作一次
【发布时间】：2021-08-28 01:52:33
【问题描述】：

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");
        });
    }
}

获取代码完成后，事件监听器不起作用。如何获取多次？

【问题讨论】：

标签： javascript html addeventlistener fetch-api

【解决方案1】：

Fetch 是异步的，因此它可能在 for 循环也在运行时仍在运行。你可以把 for 循环变成一个 while 函数。

i = 99999999999999999999...
if(confs){
    i = 0
    while (i<confs.length){ 
       blah...
          fetch(...).then(()=>{blah...i+=1})
       ...blah
    }
}

i = 99999999999999999999...

然后使用 fetch().then(()=>{i+=1})。这使得函数在移动到下一个值之前等待获取完成。它可能会解决您的问题。

但是，这可能会导致更多问题，并可能使调试变得更加困难。因此，我建议寻找一种使功能更加同步的方法。如果您确实找到了方法，请不要忘记编辑帖子以帮助其他人寻找解决方案。 :)

【讨论】：