javascript - 在异步编程中停止 javascript 循环

Question

我知道 javascript 是异步的，如果我在 .then 之后创建一个 for 循环，然后循环结束，然后对象 promise 才变得清晰，但我终生做不到修复此代码片段，也许有人可以帮助我。我的目标是循环并检查我从函数中获取的变量 ans 是否等于变量 account，如果是，则打印出我从其他函数获得的信息。

loopforCetrs : function() {
        var num;
        var account = web3.currentProvider.selectedAddress;

        App.contracts.StudentState.deployed().then(function (instance) {
        return instance.showNumOfContracts();
      }).then(function (numOfCert) {
          num = numOfCert;

            var wrapper = document.getElementById("myHTMLWrapper");

            for (var i = 0; i < num; i++) {
                App.ShowAddress(i).then(function (ans) {

                    if(ans == account) {
                        alert(ans+' Hello');
                        alert(account+' Hi')
                        App.ShowFName(i).then(function (ans) {
                            wrapper.innerHTML += '<span class="test">Name: ' + ans + ' </span><br/><br/>';
                        })

                        App.ShowLName(i).then(function (ans) {
                            wrapper.innerHTML += '<span class="test">Surname: ' + ans + ' </span><br/><br/>';
                        })

                        App.ShowInstName(i).then(function (ans) {
                            wrapper.innerHTML += '<span class="test">Institutions name: ' + ans + ' </span><br/><br/>';
                        })

                        App.ShowAddress(i).then(function (ans) {
                            wrapper.innerHTML += '<span class="test">Users address: ' + ans + ' </span><br/><br/>';
                        })

                        App.ShowCourseName(i).then(function (ans) {
                            wrapper.innerHTML += '<span class="test">Course name: ' + ans + ' </span><br/><br/>';
                            wrapper.innerHTML += '<span class="test"></span><br/><br/>';
                        })
                    }
                })

            }

      })
    },

编辑 1:这是我之前使用的代码，它完成了工作，但现在我想添加 1 件事，但碰壁了。

loopforCetrs : function() {
        var num;
        var account = web3.currentProvider.selectedAddress;

        App.contracts.StudentState.deployed().then(function (instance) {
        return instance.showNumOfContracts();
      }).then(function (numOfCert) {
          num = numOfCert;

            var wrapper = document.getElementById("myHTMLWrapper");

            for (var i = 0; i < num; i++) {

                App.ShowFName(i).then(function (ans) {
                    wrapper.innerHTML += '<span class="test">Name: ' + ans + ' </span><br/><br/>';
                })

                App.ShowLName(i).then(function (ans) {
                    wrapper.innerHTML += '<span class="test">Surname: ' + ans + ' </span><br/><br/>';
                })

                App.ShowInstName(i).then(function (ans) {
                    wrapper.innerHTML += '<span class="test">Institutions name: ' + ans + ' </span><br/><br/>';
                })

                App.ShowAddress(i).then(function (ans) {
                    wrapper.innerHTML += '<span class="test">Users address: ' + ans + ' </span><br/><br/>';
                })

                App.ShowCourseName(i).then(function (ans) {
                    wrapper.innerHTML += '<span class="test">Course name: ' + ans + ' </span><br/><br/>';
                    wrapper.innerHTML += '<span class="test"></span><br/><br/>';
                })
            }

      })
    },

Answer 1

按照预期的方式使用 promise 。坦率地说，如果使用 ES6 async/await 和模板字面值可以使代码变得如此简单，那么这段代码简直就是噩梦:

loopforCetrs : async function() {
    const account = web3.currentProvider.selectedAddress;
    const numOfCert = await (await App.contracts.StudentState.deployed()).showNumOfContracts());
    const wrapper = document.getElementById("myHTMLWrapper");

    for (let i = 0; i < numOfCert; i++) {
        if((await App.ShowAddress(i)) == account) {
            //alert(ans+' Hello'); no more ans
            alert(account+' Hi');
            wrapper.innerHTML += `<span class="test">Name: ${await App.ShowFName(i)} </span><br/><br/>`;
            wrapper.innerHTML += `<span class="test">Surname: ${await App.ShowLName(i)} </span><br/><br/>`;
            wrapper.innerHTML += `<span class="test">Institutions name: ${await App.ShowInstName(i)} </span><br/><br/>`;
            wrapper.innerHTML += `<span class="test">Users address: ${await App.ShowAddress(i)} </span><br/><br/>`;
            wrapper.innerHTML += `<span class="test">Course name: ${await App.ShowCourseName(i)} </span><br/><br/>`;
            wrapper.innerHTML += `<span class="test"></span><br/><br/>`;
        }
    }
}

这样，当回调已经解决时，您不会遇到 i 是错误值的问题，因为一切都在等待，并且保证在 之前的循环迭代中完全解决i 改变了值。

仍然有很多冗余，但我更喜欢的解决方法是向 App 添加方法，返回的不仅仅是一条微不足道的信息。改用返回所有相关信息的方法，您可以减少另外 5 行冗余代码，并大大提高性能和效率。