javascript - 暂停javascript异步功能直到用户操作

Question

我有异步功能，我希望它执行到特定点，暂停执行，并在用户执行特定操作(例如单击按钮)时恢复执行其余功能。我试过这个:

let changed = false;

let promise = new Promise(function(resolve, reject){

    if(changed){

        resolve('success');
    }else{

        reject('failure');
    }
});

async function test(){

    console.log('function started');
    console.log('before await');

    try{

        const fulfilledValue = await promise;
        console.log(fulfilledValue);
    }catch(failure){

        console.log(failure);
    }

    console.log('after await');
};

document.getElementById('change').addEventListener('click', function(){

    if(!changed){

        console.log('changed = true');
        changed = true;
    }else{

        changed = false;
    }
});

test();

但是它并没有像我希望的那样工作。异步功能不会等到用户操作。据我了解，这是因为 promise 被立即拒绝，因为“已更改”标志最初设置为 false。我怎样才能修复此代码以按预期工作？有可能吗？

Answer 1

根本不要使用那个 changed 标志。您不能观察变量或等到它具有特定值(轮询除外，但您不希望那样)。相反，您应该简单地从点击处理程序调用 resolve 回调:

var clickPromise = new Promise(function(resolve) {
    document.getElementById('change').addEventListener('click', function(e) {
        resolve(e);
    }, {once: true});
});