在使用Ajax时，我仍然无法让我的回调函数工作。它似乎没有等待回调，我做错了什么？

Question

所以我一直在关注这些帖子：here，and here等。

但是我仍然得到一个“未定义”的输出，而且它是立即出现的，所以我不认为它在等待回调。

我已经试着解决这个问题很久了。我就是不明白。我相信我理解回调的概念，但在实践中，我并不理解所有这些函数的语法。我几乎完全遵循了帖子，唯一的区别是我如何使用buttonClick。我真的很感激你能帮我解决这个问题。我已经简化了我在CodePen here和下面的代码。

有人能告诉我怎么走吗？

<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

<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>

您立即将输出元素设置为调用的返回-您需要等待数据在回调中准备就绪。

Answer 2

您的问题是getHTML()不会阻塞。它返回undefined immediate，而不是等待函数的结果。您可以使用跟随异步模式来解决您的问题。我建议你回顾一下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);
}

您也可以使用promises，但它会更难阅读。我不建议在这里回调(上面的代码中的myCallback是不必要的，即使它确实可以工作)。