使用 Ajax 時，我仍然無法讓我的回調工作。 它似乎沒有在等待回調，我做錯了什么？

Question

所以我一直在關注這些帖子： 這里和這里等。

但我仍然得到“未定義”作為 output，並且它立即出現，所以我認為它不會等待回調。

我一直在努力解決這個問題。 我只是不明白。 我相信我了解回調的概念，但在實踐中，我並不了解所有這些函數的語法。 我幾乎完全按照帖子進行了操作，唯一的區別是我使用 buttonClick 的方式。 我真的很感激能幫助我完成這項工作。 我已經簡化了我在CodePen上和下面的代碼。

有人可以指導我嗎？

<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

您的問題是 getHTML() 不會阻塞。 它返回undefined的立即數，不等待 function 的結果。 您可以使用以下異步模式來解決您的問題。 我建議您查看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);
}

您也可以使用 Promise，但它會有點難以閱讀。 我不推薦這里的回調（上面代碼中的 myCallback 是不必要的，即使它確實有效）。

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>

您立即將 output 元素設置為您的調用返回 - 您需要等待數據在回調內部准備好。