如何清除 JavaScript 中异步函数的超时

Question

Let me be very clear so as to avoid confusion. I have a sleep function (below) which timeouts for as many millisecond as I specify.

function sleep(ms) 
{
    return new Promise(resolve => setTimeout(resolve, ms));
}

Now in another function beginTest() I called sleep for some millisecond let say 5000 ms.

async function beginTest()
{
    await sleep(5000);
}

I have a separate function which gets executed when a button is clicked. I want the function to clear the timeout whenever the button is clicked before completion of 5000 ms. I understand that after 5000 ms clicking the button should not affect anything as the promise has already been resolved.

document.getElementById("reactTimeClick").onmousedown = function()
{
    cleartimeOut(); // Clear timeout of above function
}

Answer 1

It's pretty simple to do as you propose with a "cancellation token" via which the "sleep timeout" can be cancelled:

// don't do this
function sleep(ms, cancellationToken) {
    return new Promise(resolve => function() {
        let timeoutRef = setTimeout(resolve, ms);
        cancellationToken.cancel = function() {
            clearTimout(timeoutRef);
        };
    });
}

However that will not, in itself, cause the sleep promise to depart from its pending state and the promise chain (or awaiting statements) stemming from sleep() will not be informed of the cancellation. Progress will hang.

This shortcoming can be overcome, again with a cancellation token, but this time one that allows the sleep() promise to be rejected, as follows ...

// do this
function sleep(ms, cancellationToken) {
    return new Promise((resolve, reject) => function() {
        cancellationToken.cancel = function() {
            reject(new Error('sleep() cancelled'));
        };
        setTimeout(resolve, ms));
    }
}

... and in the caller, use as follows:

async function beginTest() {
    try {
        const token = {};
        const promise = sleep(5000, token);
        $('#cancelButton').on('click', token.cancel); // jQuery example, or similar in POJS
        await promise;
        // ... test code ...
        // ... return whatever;
    }
    catch(error) {
        console.log(error.message);
        // If button was clicked before the 5000 ms has expired, 
        // and no other error has been thrown, 
        // then the log will show "sleep() cancelled".
        throw error; // rethrow error to keep beginTest's caller informed.
    }
}