如何让while循环里执行完函数输出结果了才进行下一个循环？

Question

如何让while循环里执行完函数输出结果了才进行下一个循环？具体来说，下面的例子里，如何让f(list)执行完输出结果后才执行j++，然后再进入下一个循环？问题如上，代码如下：const f = () => {    ...}let arr = ['abc', 'def']let j=0;while (j<arr.length) {    const list = arr[j];    f(list);    j++;}

Answer 1

如何让f(list)执行完输出结果后才执行j++，然后再进入下一个循环？

本来就是这样的啊。。。就算你包含异步方法，那也是执行完输出结果，只是没等待异步结果返回而已。

const f = (list) => {

    return new Promise((reslove) => {

        setTimeout(() => {

            console.log(list);

            reslove();

        }, 1000);

    })

}

async function run() {

    let arr = ['abc', 'def']

    let j = 0;

    while (j < arr.length) {

        const list = arr[j];

        await f(list);

        console.log('j=', j);

        j++;

    }

}

run();

Answer 2

const f = function (data) {

    return new Promise((res, rej) => {

        setTimeout(() => {

            //在此处做操作

            console.log(data);

            res("complete");

        }, 1000);

    });

}

let arr = ['abc', 'edf', 'ghi'];

let j = 0;

for (let i = 0; i < arr.length; i++) {

    f(arr[i])

    .then(function (str) {

        console.log("j: " + j);

        j++;

    });  

}

可以使用Promise将异步操作包起来，reslove时返回，但是循环是控制不了的，它会继续，所以要使用for,不然就会陷入死循环，在执行完f函数之后再j++是可以做到的

Answer 3

可以用递归来实现啊

      const f = (list) => {

        return new Promise((reslove) => {

          setTimeout(() => {

            console.log(list);

            reslove();

          }, 1000);

        })

      };

      function run() {

        let arr = ['abc', 'def'];

        let j = 0;

        

        loop();

        /*写个方法，递归来实现*/

        function loop() {

          const list = arr[j];

          f(list).then(()=>{

            if(j < arr.length)

              loop();

          });

          console.log('j=', j);

          j++;

        }

      }

      run();

    }