javascript - 使用 javascript 全局变量在另一个函数内进行函数调用

Question

这个问题已经有答案了:

Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference (7 个回答)

已关闭 7 年前。

下面的java脚本不起作用，全局变量请帮忙解决。 Ajax 工作正常，并且在 add_article() 函数中也作为变量工作，但变量未定义。

<script type="text/javascript">
var karat = 0;
function get_advance_amount(element)
{
    if (element!="")
    {
        if (window.XMLHttpRequest) 
        {
            key = new XMLHttpRequest();
            key.onreadystatechange = function(){
                if (key.status==200 && key.readyState ==4) 
                {
                karat = key.responseText;
                //alert(karat); // this is working
                }

            };
            key.open("GET","get_advance_amount.php?q="+element,true);
            key.send();
        }
    }
}
function add_article()
{
    get_advance_amount('2');
    alert(karat); // this is not working
}
</script>
<button onclick="add_article()">Click me</button>

Answer 1

add_article 函数在 XHR 完成之前运行。

重写示例:

'use strict'

function getAdvanceAmount (element, callback) {
  if (element === '' || !window.XMLHttpRequest) return

  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
      callback(xhr.responseText)
    }
  }
  xhr.open('GET', 'get_advance_amount.php?q=' + element, true)
  xhr.send()
}

function addArticle () {
  getAdvanceAmount('2', function (karat) {
    console.log(karat)
  })
}

此技术用作回调，您可以在其中提供一个函数，一旦异步操作完成，该函数就会被调用并提供数据。这里，getAdvanceAmount() 接受一个回调，该回调将在 XHR 完成后运行。如果需要知道何时完成，addArticle() 还可以接受回调。

较新的方法是 promises以及 async/await 的提案(实际上在幕后使用了 Promise)。例如，promise 可以这样使用:

function addArticle () {
  getAdvanceAmount('2').then(karat => console.log(karat))
}

和 async/await 像这样:

async function addArticle () {
  const karat = await getAdvanceAmount('2')
  console.log(karat)
}

但是，在浏览器环境中使用这些需要进行填充和转译。