page.evaluate wait for ajax to finish loading

I am developing a puppeteer script in nodejs. It has an ajax to a load more button in that script. The thing is that, the script doesn’t wait for the ajax to finish loading thus leaving the page.evaluate to finish the script without waiting for the ajax to be done. I am a bit confused on new promise / await. Could someone help me out with the script below?

var result = await page.evaluate(({ stateSearched, areaSearched, pagePaginationNo }) => {
    function processThePage(){
        var itemResult = "testing"
        return {
            itemResult
        }
    }

    function loadMore(stateSearched,areaSearched,pagePaginationNo){
        $.ajax({
            url: "ajax.php",
            type: "GET"
        }).done(function (data) {
            if (nextPage == null) {
                lastResult = processThePage()
                return lastResult
            } else {
                loadMore(stateSearched,areaSearched,pagePaginationNo+1)
            }
        });
    }  

    loadMore(stateSearched,areaSearched,2)
})

Answer

You can pass a function that returns a Promise to the page.evaluate function and call resolve inside when your script is finished.

Code Sample

var result = await page.evaluate(() => new Promise(resolve => {
    // do all kind of asynchronous actions
    resolve(123);
}));
console.log(result); // 123

The function passed to page.evaluate returns a promise, which will be waited for to resolve before continuing. Therefore, you can put any asynchronous code inside the Promise. Call resolve when your code is finished. The argument you pass to the resolve function will be returned to your script.