Question

以下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的提案（实际上使用幕后的承诺）。例如，promises将像这样使用：

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

和async / await就像这样：

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

但是，在浏览器环境中使用这些内容需要填充和转换。

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

1 个答案: