如何让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();
    }