从 PHP 到脚本获取值 - 将 AJAX 值返回到函数

Question

我正在尝试创建一个函数，该函数将通过 XMLHTTP 请求调用某个 PHP 文件 （），并将其值返回到此函数。mineTime.php目前我遇到了麻烦，因为它不起作用，要么它什么都不返回，要么返回未定义或空值，我不知道该怎么办。我认为这可能与 onload 事件有关。我的时间.php<?php$miningTime = 3600;echo json_encode($miningTime);?>小黄人.jsfunction GetTime() {  var miningTime = null;  var xhr = new XMLHttpRequest();  xhr.onload = function() {    miningTime = this.responseText;  }  xhr.open("GET", "../php/mineTime.php", true);  xhr.send();  return miningTime;}window.onload = function () {    var timeToMine = parseInt(GetTime());    console.log(timeToMine); // outputs: NaN    var display = document.querySelector('#time'),        timer = new CountDownTimer(timeToMine),        timeObj = CountDownTimer.parse(timeToMine);        ...*code continues*提前致谢！

Answer 1

这是新程序员面临的常见问题，尤其是在处理 AJAX 调用时。即使是更有经验的程序员也很难掌握AJAX功能。重要的是要记住 AJAX 中的 A 代表什么，即异步。这意味着主程序将继续运行，而另一个侧程序将完成其他一些任务，通常称为线程。在此实例中，您尝试通过从该异步调用中获取值来返回。因为该 AJAX 调用在与主程序不同的线程上运行，因此 将始终为 null。miningTimeminingTime

为了正确实现这一点，您需要实现所谓的回调函数。回调函数是在异步程序完成其正在执行的操作时运行的函数。

它应该如何构建：

    function GetTime(callback) {

      var xhr = new XMLHttpRequest();

      xhr.onload = callback

      xhr.open("GET", "../php/mineTime.php", true);

      xhr.send();

    }

    function callbackFunction() {

      var timeToMine = parseInt(this.responseText);

      console.log(timeToMine); // outputs: NaN

      var display = document.querySelector('#time'),

      timer = new CountDownTimer(timeToMine),

      timeObj = CountDownTimer.parse(timeToMine);

            ...*code continues*

}

    window.onload = function () {

        var callback = callbackFunction

        GetTime(callback) 

}

请注意，在 Javascript 中，还有其他可能的方法来处理这个问题。有些东西被称为以及。在我看来，这是最简单，最普通的方法。Promisesasync/await

更新：由于您不能使用具有时间参数的函数，因此您可以改为传递对该函数的引用。引用函数有点像复制函数并将其粘贴到其他位置，而调用函数实际上运行它。您可以通过括号来辨别两者。如果在函数名称后添加左括号和右括号，它将调用该函数，如果省略它们，则该函数将仅被引用。

Answer 2

正如@EricBrown中提到的，另一种方法是使用承诺（IE不支持）)

function GetTime() {

    return new Promise( (resolve, reject) => {

        var miningTime = null;

        var xhr = new XMLHttpRequest();

        xhr.onload = function() {

            resolve(this.responseText);

        }

        xhr.open("GET", "../php/mineTime.php", true);

        xhr.send();

    })

}

window.onload = async function () {

    const data = await GetTime();

    var timeToMine = parseInt(data);

    console.log(timeToMine); // outputs: NaN

    var display = document.querySelector('#time'),

        timer = new CountDownTimer(timeToMine),

        timeObj = CountDownTimer.parse(timeToMine);

        ...*code continues*