Question

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>

function foo(callback) {
    $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: callback
    });
}

foo(function(result) {
alert(JSON.stringify(result));
});
</script>
</head>
<body>
<button onclick="foo();">Weather</button>
</body>
</html>

我希望点击按钮后它应该执行，但是在运行之后它会执行值。如何混合这个错误？愚蠢的可能是

修改

我之前尝试过：

<!DOCTYPE html>
<html>
<body>
<p id="temp"></p>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script language="javascript" type="text/javascript">
function getWeather() {
  data_Json = {};
  $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: function(data) {
      //alert(JSON.stringify(data));
      data_Json = data;
      //alert("Weather Report: "+data_Json);
    },
    error: function(e) {
      alert(e.message);
    }
  });
  return data_Json;
}

function temp() {
  //getWeather(data_Json);
  obj = JSON.stringify(getWeather(data_Json));
  alert("Got"+JSON.stringify(obj));
  //alert(JSON.stringify(getWeather()));
  document.getElementById("temp").innerHTML = obj.main.temp;
alert("Temp : "+obj);
  }
</script>
</body>
<body>
<button onclick="getWeather();">Get Weather</button>
<button onclick="temp();">Temperature</button>

</body>
</html>

但这不是一个好习惯，所以我尝试了第一个代码

Answer 1

您使用foo明确调用foo(function(result) {...，因此......执行。

澄清一下：onclick="foo();"仅控制点击事件发生的事情。但是，对foo的第一次调用并未绑定到事件，因此无论如何都会执行。

Answer 2

这段代码实际上执行函数本身。

foo(function(result) {
    alert(JSON.stringify(result));
});

如果省略通话中的回调，情况会更加明显。

foo(...);

您可能需要类似于以下内容的内容

function foo(callback) {
    $.ajax({
    url: "http://api.openweathermap.org/data/2.5/weather?q=London",
    dataType: 'JSON',
    success: callback
    });
}

function myCallback(result) {
    alert(JSON.stringify(result));
}

<button onclick="foo(myCallback);">Weather</button>

Javascript：点击之前，执行功能

2 个答案: