I still can't get my callbacks to work when using Ajax. It doesn't seem to be waiting for the callback, what am I doing wrong?

Question

So I've been following these posts: here , and here etc.

But I'm still getting 'undefined' as an output, and it's appearing instantly, so I don't think it's waiting for the callback.

I've been trying to solve this for so long. I just don't understand it. I believe that I understand the concept of callbacks, but in practice, I'm not understanding the syntax of all these functions. I've followed the posts almost exactly, the only difference is how I'm using the buttonClick. I would really appreciate some help on getting this working. I've simplified my code which is on CodePen here and also below.

Can anyone direct me please?

<button onclick="buttonClick()">Click Me</button>
<span id="output"></span>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

<script type="text/javascript">

function buttonClick() {
    document.getElementById('output').innerHTML=getHTML(myCallback);
}

function getHTML(callback){
    $.ajax({
        url: 'https://cors-anywhere.herokuapp.com/https://www.google.com/',

        success: callback
    })
}
    
function myCallback(result){
    console.log(result.slice(0,100))
    return result.slice(0,100)
}

Answer 1

Your problem is that getHTML() does not block. It returns undefined immediate, not waiting for the result of the function. You can use the follow asyncrhonous pattern to solve your issue. I suggest you review async code on MDN .

async function buttonClick() {
  const html = await getHTML(myCallback);
  document.getElementById('output').innerHTML = html;
}

async function getHTML(callback) {
  const result = await $.ajax({
    url: 'https://cors-anywhere.herokuapp.com/https://www.google.com/'
  });
  return callback(result);
}

You could alternatively use promises, but it'd be a bit harder to read. I don't recommend callbacks here (myCallback in the above code is unnecessary even if it does work).

Answer 2

<button onclick="buttonClick()">Click Me</button>
<span id="output"></span>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

<script type="text/javascript">
function getHTML(callback,err){
    $.ajax({
        url: 'https://cors-anywhere.herokuapp.com/https://www.google.com/',
        error: err,
        success: callback
    })
}

function buttonClick() {
    getHTML(function(data){
        document.getElementById('output').innerHTML=data;
    }, function(xhr,status,err){
        document.getElementById('output').innerHTML='SERVER ERROR!';
        console.log(err+', status:'+status)
    });
}
</script>

you were instantly setting the output element to the return of your call - you need to wait for the data to be ready INSIDE the callback.