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

Question

mineTime.php我正在尝试创建一个函数，该函数将通过XMLHTTPRequest调用某个 PHP 文件 ( )并将其值返回给该函数。目前我遇到了麻烦，因为它不工作，要么什么都不返回，要么返回 undefined 或 null，我不知道该怎么做。我认为这可能与 onload 事件有关。mineTime.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 代表什么，异步。这意味着主程序将继续运行，而另一个副程序将工作以完成一些其他任务，通常称为线程。在这种情况下，您试图miningTime通过从该异步调用中获取值来返回。因为该 AJAX 调用在与主程序不同的线程上运行，miningTime所以始终为空。

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

这是它的结构：

    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 中，还有其他可能的处理方式。有些东西叫做Promisesas well as async/await。在我看来，这是最简单、最普通的方法。

更新：因为你不能有一个带有时间参数的函数，你可以做的是传递一个对该函数的引用。引用函数有点像复制函数并将其粘贴到其他地方，而调用函数实际上是在运行它。您可以通过括号辨别两者。如果在函数名后加上左括号和右括号，则调用该函数，如果省略，则仅引用该函数。

Answer 2

另一种方法是使用 Promise（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*