I have a small chrome extension as a beginner project and I have the following situation.

Lets pretend I have a website with a search button. When the button is pressed, two options can come up:

1. there is a search result with a button called "buy"
2. there is no search result and so is no button "buy"

This is the relevant part of code I have:

        mouseEventClick('#search'); // Search btn

        await sleep(250); // hard coded sleep timer

        // here I need a way to wait for the #buy button is clickable.


        try {
            mouseEventClick('#buy'); // click buy btn
            
        } catch {
            await sleep(750);
            mouseEventClick('#back'); // no result - go back to search mask
        }

I would instead of the await sleep(250) I would like to make it that way that the app is waiting until the button #buy is loaded in the DOM and clickable. Then it should go into the try code block.

But I do not want it to wait forever. I would like to let it wait max. 1 second and if the #buy btn is not showing up after that 1 second, it should still go to try.

So what I want to achieve is a flexible sleep timer between clicking #search and the search result that waits exaclty until the element can be clicked, but not longer than 1 second.