在函数完成之前触发 Javascript 回调（无 jQuery）答案

【问题标题】：Javascript callback being fired before function is complete (no jQuery)在函数完成之前触发 Javascript 回调（无 jQuery）
【发布时间】：2012-12-13 20:20:11
【问题描述】：

我有 2 个 javascript 函数，第一个是加载 ajax 内容的函数（通过另一个函数），第二个是回调函数。它们看起来像：

function createReply(callBack){
    ajaxPage('test.html', 'next-reply');
    callBack();
}

function updateNext(){
    document.getElementById('next-reply').id  = "reply-item";
}

createReply(updateNext);

如您所见，我正在调用createReply() 函数并将回调函数的名称传递给它，在本例中为updateNext()

在createReply() 函数中，我正在调用另一个通过ajax 加载内容的函数。当这个函数完成时，回调应该被执行。回调会更改正在加载 ajax 内容的 div 的 id。这就是问题所在

我收到错误：

Uncaught TypeError: Cannot set property 'innerHTML' of null

也就是说它不能改变id为“next-reply”的元素的内容，因为它不存在，它不存在的原因是因为回调函数如果该元素更改 id。目的是在加载 ajax 内容后触发回调（即，在执行 ajaxPage() 函数后）

谁能看出问题所在？有没有更好的方法在纯 javascript 中实现回调函数？

PS：没有 jQuery

【问题讨论】：

什么是ajaxPage？你也可以发布它的来源吗？基本上，您需要将callBack 传递给ajaxPage 并在服务器返回响应时调用它。
我想到了，但我无法改变ajaxPage 函数的工作方式，它在网站上广泛使用，我不想影响网站上的任何其他内容。这肯定会破坏回调函数的意义吗？
问题是您的 AJAX 调用是异步发生的，即 ajaxPage 在它实际上完成之前立即返回。如果ajaxPage 确实不支持回调事件的概念，你需要重新考虑你的设计。
是的，我想我只能硬着头皮改变ajaxPage 函数的工作方式。真的应该不会太糟糕，它只是添加了一个可选的回调函数。我希望会有一个“更好”的解决方案，但是哦。让我更欣赏 jQuery :)
这是 JavaScript 的优点之一。您可以在末尾添加一个可选参数并说if(callback) callback(); 而不会破坏您现有的代码。祝你好运！

标签： javascript ajax callback

【解决方案1】：

正如 cmets 中所指出的，这是因为 AJAX 调用是异步发生的。 createReply 运行的线程在从服务器返回响应之前继续运行。

您需要重构 ajaxPage 以接受对 callback 的引用，并在响应准备好时调用它。比如：

function createReply(callBack){
    ajaxPage('test.html', 'next-reply', callBack);
}

然后，在 ajaxPage 中：

function ajaxPage(url, id, callback){
   //Do AJAX stuff

   //When the response is returned:
   if(callback) callback();
}

【讨论】：

谢谢迈克。是的，我同意了。我面临的主要问题是ajaxPage 函数正在调用一系列其他函数，所以我不得不通过被调用函数继续传递回调函数。我得到了它的工作，我只是觉得它不是很优雅，希望有一个更整洁的解决方案。
是的，这就是范围界定的目的。如果所有这些 其他函数 都在 ajaxPage() 函数范围内，则您不需要继续传递它。但很高兴你的工作顺利！

【解决方案2】：

现在你的回调是在 ajaxPage 函数之后执行的。我的意思是你不要等待 ajaxPage 返回成功。它在 ajax 调用结束后立即被触发。很可能在您的回调被触发之前它没有完成。

【讨论】：