Javascript getJSON 将参数存储为函数范围之外的变量问题

Question

正在尝试通过 getJSON 为 id='alert' return 来自 URL 的日期值。似乎即使将异步设置为 False，getJSON 也无法正常工作。我从另一个正常工作的脚本中获取了这段代码。

<!DOCTYPE html>
<html>
<body>


<p><input type="text" id="input" value="100 | 47.6735" rows="30" cols="50"></p>

<button class="btn btn-primary btn-lg" onclick="getAlert()">Get Date Alert</button>

<p id="alert"></p>

<script>

$.ajaxSetup({
    async: false
  });

function getJSON_data(url){
  var date = '1'
  $.getJSON(
    url,
    function(data) {
    var date = data.date
    });  
  
  return {'test':date}
}

function getAlert() {

  var str = document.getElementById("input").value;;
  var res = str.split(" | ");
  var id = res[0];

  var url = 'http://date.jsontest.com/'
 
  var alert = getJSON_data(url).test;
  document.getElementById("alert").innerHTML = alert;
}

</script>

</body>
</html>

向脚本的 js 部分添加了 Async 和 Promises。无法在“提醒”部分完全获取到 return 的日期。

...

function getJSON_data(url){
  return new Promise((resolve, reject) => {
    $.getJSON(
      url,
      function({date}) {
        resolve({test: date})
      });
    })
  })
}

function getAlert() {

  var str = document.getElementById("input").value;
  var res = str.split(" | ");
  var id = res[0];
 
  var url = 'http://date.jsontest.com/';

  var alert = (await getJSON_data(url)).test;
  document.getElementById("alert").innerHTML = alert
}

...

Answer 1

首先，请永远，绝对不要使用 syncronouse ajax，因为有一次，很久以前，异步请求是为了减少很多痛苦而建立的）

其次，你应该了解函数作用域和闭包的概念：

var globalVar = "some value"

function foo() {
  var varInClosure = "some other value"
  console.log(
    "here we have acces to global var:", globalVar, // some value
    "\nand local var:", varInScope // some other value
  ) 
}

console.log(
  "here we have access only to var in same scope", globalVar, // some value
  "\nbut not to var from other scope", varInScope // undefined
)

在你的情况下，你可以 select 一种方式，丑陋但有效，使用全局变量，或者正确和现代 - 使用 async/await 和承诺：

function getJSON_data(url){
  return new Promise((resolve, reject) => {
    $.getJSON(
      url,
      function({date}) {
        resolve({test: date})
      });
    })
  })
}

//....

var alert = (await getJSON_data(url)).test;
document.getElementById("alert").innerHTML = alert;

Javascript getJSON 将参数存储为函数范围之外的变量问题

Javascript getJSON to store parameter as variable outside of function scope issue

html

javascript

api

getjson