[英]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?
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.但我仍然得到“未定义”作为 output,并且它立即出现,所以我认为它不会等待回调。
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.我几乎完全按照帖子进行了操作,唯一的区别是我使用 buttonClick 的方式。 I would really appreciate some help on getting this working.我真的很感激能帮助我完成这项工作。 I've simplified my code which is on CodePen here and also below.我已经简化了我在CodePen上和下面的代码。
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)
}
Your problem is that getHTML() does not block.您的问题是 getHTML() 不会阻塞。 It returns undefined
immediate, not waiting for the result of the function.它返回undefined
的立即数,不等待 function 的结果。 You can use the follow asyncrhonous pattern to solve your issue.您可以使用以下异步模式来解决您的问题。 I suggest you review async code on MDN .我建议您查看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.您也可以使用 Promise,但它会有点难以阅读。 I don't recommend callbacks here (myCallback in the above code is unnecessary even if it does work).我不推荐这里的回调(上面代码中的 myCallback 是不必要的,即使它确实有效)。
<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.您立即将 output 元素设置为您的调用返回 - 您需要等待数据在回调内部准备好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.