CODEWITHSUNDEEP
javascriptreactjs
someuser2491
someuser2491

Reputation: 1968

How to use await on document.exitFullScreen method in javascript or react?

i want to exit fullscreen on clicking a button...and use await to wait for the exit to happen...

below is the code,

class component1 extends React.PureComponent {
    handle_click = () => {
        document.exitFullscreen();
        this.other_method();
    }

    render() {
        return (
            <div onClick={this.handle_click}>button</div>
        )
    }
}

I want to call this.other_method only after the fullscreen is exited completely using await...

how can i do it. could someone help me fix it. thanks.

Upvotes: 1

Views: 628

Answers (4)

developerKumar
developerKumar

Reputation: 1796

You can use async/ await like below:

class component1 extends React.PureComponent {
    handle_click = async () => {
        try{
           await document.exitFullscreen();
           this.other_method();
        }catch(error) {
           alert(error);
        }


    }

    render() {
        return (
            <div onClick={this.handle_click}>button</div>
        )
    }
}

In order to use await you will have to tell that function is using await, by using the async keyword. For more details: visit MDN docs for async fnction.

Also, according to MDN docs document.exitFullscreen() returns a promise. which can be handled by then() and catch() as well.

Upvotes: 0

Chirag Ravindra
Chirag Ravindra

Reputation: 4830

According to MDN, document.exitFullscreen() returns an exitPromise. You can use await document.exitFullScreen(); using async functions or just use the promise directly document.exitFullscreen().then(() => this.other_method()).catch(() => true)

Upvotes: 1

ApplePearPerson
ApplePearPerson

Reputation: 4439

document.exitFullscreen returns a promise.

You are able to run code afterwards using .then on the promise.

document.exitFullscreen().then(() => {
    // Code you want to do afterwards.
});

Upvotes: 2

Ivan Cherviakov
Ivan Cherviakov

Reputation: 538

Handler can be async function:

    handle_click = async () => {
        await document.exitFullscreen();
        this.other_method();
    }

    render() {
        return (
            <div onClick={this.handle_click}>button</div>
        )
    }
}

Upvotes: 0

Related Questions