单击 html 元素在 setTimeout() 后不起作用

Question

I have a userscript which loads a list of buttons on a page. It then tries to click all the buttons one by one in a loop. This is my function.

const clickButtons = async function(listButtons) {
    const filteredButtons = Array.from(listButtons).filter(x => shouldButtonBeClicked(x.innerText));
    for (let i = 0; i < filteredButtons.length; i++) {
        filteredButtons[i].click();
    }
}

The above piece of code works as expected. No issues. All the buttons are clicked.

But, when I try to add some wait time before every click, it doesn't work. None of the buttons get clicked. Notice wait() on first line inside the loop

const wait = async function(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}
const clickButtons = async function(listButtons) {
    const filteredButtons = Array.from(listButtons).filter(x => shouldButtonBeClicked(x.innerText));
    for (let i = 0; i < filteredButtons.length; i++) {
        await wait(1000);
        filteredButtons[i].click();
    }
}

What am I missing here?

Answer 1

Resolving the promise with a click should work

await wait(1000).then((res)=> filteredButtons[i].click());
        

Answer 2

You can try this:

const wait = async function(time) {
    return new Promise(resolve => setTimeout(resolve, time));
}

const clickButtons = async function(listButtons) {
    const filteredButtons = Array.from(listButtons).filter(x => shouldButtonBeClicked(x.innerText));
    filteredButtons.forEach(async function (filteredButton, index) {
       await wait(1000);
       filteredButtons[index].click();
       // OR
       // filteredButton.click();
    });
}