Question

我知道这是一个很长的问题，所以请允许我尽我所能解释。

我想在页面加载后运行两个javascript函数，我们将它们称为function1（）和function2（）。

function1（）使用AJAX从数据库中检索信息，该信息将根据数据库中获取的信息在div中排列内容。一旦函数完成，它还会从数据库中返回内容。

function2（）需要数据库中的值才能正常运行，因此需要等到function1（）在function2（）运行之前返回其值。不幸的是，我的代码不起作用，并且没有详细说明，下面是代码的示意图：

function function1() {
if (some_cookie_exists) {
  //run some code
} else {
  //send parameters through "POST"
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var a = some_value_from_database;
    // change div content
  return a;
  }
  }
//sending parameters
}
function function2(a) {
//run code that depends on value of "a"
}

window.onload = function() {
var data = function1();
function2(data);

我得到的错误是var数据未定义。 function1（）成功检索数据，并按照我的意图运行，但function2（）根本不执行，因为缺少值。任何人都可以弄清楚为什么我会得到这个以及我应该如何解决这个问题？

注意：我真的只熟悉Javascript（仍然是新手），我基本上对JQuery一无所知，所以如果你使用它来修复代码，请向我解释为什么这样做（它会省去麻烦）后）

Answer 1

AJAX是异步的（这是第一个A代表的）。 AJAX操作的结果在function1（）中不可用，它们是在您附加到XMLHttpRequest对象的onreadystatechange处理程序中检索的。所以目前尚不清楚你将如何做到

var a = some_value_from_database;

function1()中的

。

您需要做的是从function2()处理程序中调用onreadystatechange。

如果您发布function1的实际实施，我们可能会提供更具体的详细信息。

更新：

以下是当AJAX调用中的值可用时调用function2()的方法：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var a = some_value_from_database;
        function2(a);
    }
}

Answer 2

通过回调来做。

function function1(callback) {
    /* ... */
    callback(data); // instead of return
}
var function2 = function(data) { // important: make "function2" a variable so that it can be passed as an argument later on
    /* ... */
}    
window.onload = function() {
    function1(function2); // important: no parentheses after function2, otherwise it would be executed right away
}

Answer 3

因为根据定义ajax是异步的，所以function1将在ajax在function1中完成之前开始执行。 JQuery在这里很有用，因为你可以将function2放在function1中ajax调用的成功回调中。

因此，在您的HTML中包含JQuery，以下JS应该可以工作：

$(function() {   //same as onload
      function1() ;
}

function function1() {
        $.ajax({
              url: "url here",
              type: "GET",
               success: function(data) { // data is what is returned in ajax response
                           // rearrange divs
                            function2(data);
                }
           });
);

function function2(data) {
}

更多关于JQuery ajax函数的信息： http://api.jquery.com/jQuery.ajax/

如何执行Javascript函数需要一个onload函数完成后给出值的值？

3 个答案: