暫停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();

但它不能像我想的那樣工作。 異步功能不會等到用戶操作。 據我所知，這是因為承諾立即被拒絕，因為“changed”標志最初設置為false。 如何修復此代碼以按預期工作？ 有可能嗎？

Answer 1

根本不要使用那個changed旗幟。 您無法觀察變量或等到它具有特定值（輪詢除外，但您不希望這樣）。 相反，您應該只需從click處理程序調用resolve回調：

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

Answer 2

你只需要一種從外面解決你的承諾的方法，那么：

let outsideResolve;
let promise = new Promise(function(resolve) {
    outsideResolve = resolve;

});

您現在可以從單擊處理程序中調用outsideResolve。