为什么我的带有承诺的递归函数只等待一次？

Question

我正在尝试形象化 "Tower of Hanoi"-问题，并尝试使用 promises 让函数等待一个圆盘的运动被动画化（我用 setTimeout 模拟），然后再继续解决问题。此测试代码计算出正确的动作，但只等待动画一次，然后立即吐出其余部分：

    var A = "rod A";
    var B = "rod B";
    var C = "rod C";

    solve(3,A,C,B);

    function solve (n,source,target,spare) {
        var promise = new Promise(function(resolve,reject){
            if (n==1) {
                setTimeout(function(){
                    console.log("move a disc from "+source+" to "+target);
                    resolve();
                },1000);
            }
            else {
                        solve(n-1,source,spare,target)
                .then(  solve( 1 ,source,target      )  )
                .then(  solve(n-1,spare,target,source)  )
                .then(  resolve()                       );
            }
        });
        return promise;
    }

对于不知道这个问题的人，我稍微简化了代码，基本上目标是打印 "move" 七次，每次之间延迟一秒：

    solveTest(3);

    function solveTest (n) {
        var promise = new Promise(function(resolve,reject){
            if (n==1) {
                setTimeout(function(){
                    console.log("move");
                    resolve();
                },1000);
            }
            else {
                        solveTest(n-1)
                .then(  solveTest( 1 )  )
                .then(  solveTest(n-1)  )
                .then(  resolve()       );
            }
        });
        return promise;
    }

Answer 1

问题是您立即调用所有调用，然后将它们的 return 值作为参数传递给 .then()。您需要做的是将函数传递给 .then()，然后调用它们：

function sleep (ms) {
  return new Promise(function (resolve) {
    setTimeout(resolve, ms)
  })
}

function solve (n, source, target, spare) {
  if (n === 1) {
    return sleep(1000).then(function () {
      console.log('move a disc from ' + source + ' to ' + target)
    })
  } else {
    return solve(n - 1, source, spare, target).then(function () {
      return solve(1, source, target, spare)
    }).then(function () {
      return solve(n - 1, spare, target, source)
    })
  }
}

solve(3, 'rod A', 'rod B', 'rod C')

但是您可以使用 async 和 await:

使其更易于阅读

const sleep = ms => new Promise(resolve => { setTimeout(resolve, ms) })

async function solve (n, source, target, spare) {
  if (n === 1) {
    await sleep(1000)
    console.log(`move a disc from ${source} to ${target}`)
  } else {
    await solve(n - 1, source, spare, target)
    await solve(1, source, target, spare)
    await solve(n - 1, spare, target, source)
  }
}

solve(3, 'rod A', 'rod B', 'rod C')

为什么我的带有承诺的递归函数只等待一次？

Why does my recursive function with promises only wait once?

javascript

promise

towers-of-hanoi