Question

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

Answer 1

正如评论中所指出的，这是因为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();
}

Answer 2

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

在函数完成之前触发Javascript回调（没有jQuery）

2 个答案: