javascript - promise 和 setTimeout

Question

我正在尝试确定一种方法来“暂停”我的 Promises 代码，直到条件为真，也许是通过使用递归 setTimeout()。对于我的简单示例，我手动设置 waitValue。

我需要稍等片刻，如果waitValue仍然为false，那么就继续等待。当然，当 waitValue 变为 true 时，则继续处理。这是我到目前为止拼凑的内容:

var counter=0;
function promiseTest() { 
    return new Promise(  (resolve, reject) => {
        if  ( waitValue )  {
            console.log('waitValue is now true');
            resolve('FIRST PROMISE');
        } else  {                      // we need to wait again
            if  ( counter > 1000 ) {   // dont wait forever.
                reject('waited too long');
            } else {
                console.log('WAIT MESSAGE: ' + counter++ );
                setTimeout( promiseTest, 3000);
            }
        }
    })
    .then(   result => {
        return(`SECOND PROMISE:  the result is: ${result}`);
    });
}

并使用它:

promiseTest().then( (result)=>{ console.log('LOCAL MESSAGE: ' + result); });

以下工作正常:

var waitValue = true;
promiseTest().then( (result)=>{ console.log('LOCAL MESSAGE: ' + result); });
// waitValue is now true
// LOCAL MESSAGE: SECOND PROMISE:  the result is: FIRST PROMISE

然而，下面的内容似乎并没有像我想要的那样完成:

var waitValue = false;
promiseTest().then( (result)=>{ console.log('LOCAL MESSAGE: ' + result); });
// waiting messages appear as expected
waitValue = true;
// waitValue is now true
// no other messages

我一直无法找到临时执行的 promise 示例。一个普通的 javaScript 示例可能如下所示:

var waitValue = false;
var counter = 0;
(function tester() {
   if  ( waitValue ) {
      console.log('finally true');
   } else {
       if  ( counter > 1000 ) {
           console.log('waited too long');
           process.exit;
       } else {
           console.log('still waiting, counter = ' + counter++);
           setTimeout(tester, 1000);
       }
   }
})();
// wait a few seconds and enter this into the console:
var waitValue = false;

临时暂停执行的 promises 脚本是什么样的？或者也许根本不应该像这样使用 Promises？

非常感谢。

Answer 1

思路是对的。当你递归调用函数时，你只需要解决当前的 promise ，否则你当前的 promise 将永远不会实现。

但是请注意，如果等待时间很长，您会创建一堆 promise 。

function promiseTest(counter = 1000) { 
    return new Promise(  (resolve, reject) => {
        if ( waitValue )  {
            console.log('waitValue is now true');
            resolve('FIRST PROMISE');
        } else if  ( counter <= 0 ) {   // dont wait forever.
            reject('waited too long');
        } else {
            console.log('Count down: ' + counter);
            setTimeout( _ => { // make sure to call `resolve` after the nested promise resolved:
                promiseTest(counter-1).then(resolve);
            }, 3000);
        }
    })
    .then(   result => {
        return `SECOND PROMISE:  the result is: ${result}`;
    });
}

var waitValue = false;

promiseTest().then ( result => {
   console.log('done:', result);
});

// schedule the change of the waitValue:
setTimeout(_ => waitValue = true, 4000);

请注意输出将如何包含已解决的每个嵌套链式 promise 的一些痕迹。

备选

我发现对您在 Promise 构造函数回调中定义的函数执行递归调用更直观，而不是对创建 Promise< 的函数执行递归调用。这样你只创建一个 promise ，你就避免了 promise constructor anti-pattern这是你的想法(以及上面的工作版本):

function promiseTest(counter = 1000) { 
    return new Promise(  (resolve, reject) => {
        (function loop(counter) {
            if ( waitValue )  {
                console.log('waitValue is now true');
                resolve('FIRST PROMISE');
            } else if  ( counter <= 0 ) {   // dont wait forever.
                reject('waited too long');
            } else {
                console.log('Count down: ' + counter);
                setTimeout( loop.bind(null, counter-1), 3000);
            }
        })(counter); // initial value of count-down
    })
    .then(   result => {
        return `SECOND PROMISE:  the result is: ${result}`;
    });
}

var waitValue = false;

promiseTest().then ( result => {
   console.log('done:', result);
});

// schedule the change of the waitValue:
setTimeout(_ => waitValue = true, 4000);

请注意输出与第一个版本略有不同，这反射(reflect)出只涉及一个new promise

注意:这不是必需的，但我更喜欢从某个值 (1000) 开始倒数，并将其作为参数传递给执行循环的匿名函数。