addEventListener 中的 fetch api 只工作一次

Question

addEventListener(click) 中的获取 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");
        });
    }
}

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

Answer 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})。这使得函数在移动到下一个值之前等待获取完成。它可能会解决您的问题。

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

addEventListener 中的 fetch api 只工作一次

The fetch api in addEventListener only works once

html

javascript

addeventlistener

fetch-api