ecmascript 6 - Pausing javascript async function until user action - Stack Overflow

admin管理员组

文章数量:1332319

I have async function and I want it to execute to certain point, pause execution, and resume execution rest of function when user makes certain action (clicks a button for example). I tried this:

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

However it doesn't work as I would like to. Async function doesn't wait till user action. As I understand it happens because promise is instantly rejected, because "changed" flag is initialy set to false. How can I fix this code to work as expected? Is it possible at all?

I have async function and I want it to execute to certain point, pause execution, and resume execution rest of function when user makes certain action (clicks a button for example). I tried this:

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

However it doesn't work as I would like to. Async function doesn't wait till user action. As I understand it happens because promise is instantly rejected, because "changed" flag is initialy set to false. How can I fix this code to work as expected? Is it possible at all?

• javascript
• ecmascript-6
• async-await
• es6-promise

Share Improve this question Follow asked Jul 27, 2017 at 16:07 FurmanFurman 2,44355 gold badges3636 silver badges5252 bronze badges 1

• Can't you just plete the async action, save the result somewhere and then show it only after a button has been clicked ? Would that achieve the intended result for you ? – G4bri3l Commented Jul 27, 2017 at 16:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Don't use that changed flag at all. You cannot watch a variable or wait until it has a certain value (except for polling, but you don't want that). Instead, you should simply call the resolve callback from the click handler:

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

You just need a way to resolve your Promise from outside, what about:

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

});

You can now call outsideResolve from your click handler.

本文标签： ecmascript 6Pausing javascript async function until user actionStack Overflow