Javascript 延迟页面加载，直到收到AJAX调用_Javascript_Jquery_Html_Ajax

Javascript 延迟页面加载，直到收到AJAX调用

javascript jquery html ajax

Javascript 延迟页面加载，直到收到AJAX调用,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一个计算比特币开采盈利能力的程序，因此需要比特币的实时价格，但我也希望用户能够在最初加载为实时价格后编辑价格我遇到的问题是，当我运行代码时，bpv最初是未定义的，即使应该在主体加载时调用它，ajax调用也没有问题，因为一旦在主体加载后运行更新，bpv就会被定义我怀疑这是因为ajax调用的加载时间比页面加载时间长，导致bpv未定义，然后当我运行update（）时，代码已经初始化，因此没有延迟我还怀疑解决这个问题的方法是让页面等待加载，直到ajax调用被发送回来，但我无法想象这是可伸缩的

我有一个计算比特币开采盈利能力的程序，因此需要比特币的实时价格，但我也希望用户能够在最初加载为实时价格后编辑价格

我遇到的问题是，当我运行代码时，bpv最初是未定义的，即使应该在主体加载时调用它，ajax调用也没有问题，因为一旦在主体加载后运行更新，bpv就会被定义

我怀疑这是因为ajax调用的加载时间比页面加载时间长，导致bpv未定义，然后当我运行update（）时，代码已经初始化，因此没有延迟

我还怀疑解决这个问题的方法是让页面等待加载，直到ajax调用被发送回来，但我无法想象这是可伸缩的

我对这个很陌生，所以试着对我放松点，谢谢

<head>
var bpv;
function update(){
getVal();
getPrice();
function getPrice(){
    $.ajax({
        dataType:"json",
        type: 'GET',
        url:'https://blockchain.info/ticker',
            success: function(data){
                 bpv = data.USD.last;       
            }

    });
}

}

</head>
<body onload = "update()" >
<script>
function getVal(){
//Current Value of Bitcoin
        bpv = document.getElementById("bp").value;
</script>
Value of Bitcoin ($)<br/>
        <input type="text" id="bp" onKeyDown="getVal()" onKeyUp="getVal()" value="" ><br/>


var-bpv；
函数更新（）{
getVal（）；
getPrice（）；
函数getPrice（）{
$.ajax({
数据类型：“json”，
键入：“GET”，
网址：'https://blockchain.info/ticker',
成功：功能（数据）{
bpv=data.USD.last；
}
});
}
}
函数getVal（）{
//比特币的现值
bpv=document.getElementById（“bp”）.value；
比特币价值（$）

编辑：我使用了Alex的解决方案，虽然它只修复了显示未定义的输入，而不是计算的最终结果，所以如果在我再次运行计算的地方实施了一个非常简陋的解决方案，.1秒后页面加载，如果任何比我聪明的人知道更好的解决方案，我的耳朵都会敞开着Ready函数中的查询代码

所以有几件事

您的第一个标签无效。头标签需要包含适当的内容。
将所有javascript移到脚本标记内
```
函数getVal（）{
```
格式不正确，语法无效。缺少右括号

不要在进行AJAX调用后尝试设置bpv，而是更新DOM

document.getElementById（“bp”）的值。value=data.USD.last

Ajax调用是异步的。因此，在调用完成时，页面的其余部分将始终执行。我不确定您想要完成什么，但如果您希望在输入框上显示比特币的价值，然后让用户在加载比特币后对其进行更改，您可以遵循以下操作：

从禁用输入框开始
使用AJAX调用加载比特币
在字段中设置响应价格
启用该字段，以便用户可以编辑

这可能看起来像：（我正在删除部分代码以举例说明，但如果您有任何问题，请告诉我）


var-bpv；
document.addEventListener（“DOMContentLoaded”），函数（事件）{
getPrice（）；
});
函数getPrice（）{
$.ajax({
数据类型：“json”，
键入：“GET”，
网址：'https://blockchain.info/ticker',
成功：功能（数据）{
bpv=data.USD.last；
设定价格输入（bpv）；
}
});
}
函数setPriceInput（值）{
var input=document.getElementById（'bp'）；
input.value=值；
input.disabled=false；
}
比特币价值（$）

此解决方案将等待页面呈现，然后尝试获取价格。一旦API响应价格，它将在输入上设置价格并再次启用（如果查看输入元素，它将以禁用状态启动）

这与问题无关。这是问题的全部问题，buddyNo；他想等待AJAX结果。同意这正是问题所在，但@VictorHugoTerceros可以添加更多的解释，比如放入

bpv=document.getElementById（“bp”）.value；

在包装器中，然后调用ajax。在

update（）结尾处的bpv
的值

调用将是

未定义的

。这是完全错误的。你应该使用承诺。可能的重复我应该指定我只是删除了这些相关的代码部分，但当我加载页面时，它没有遇到任何错误我已经实现了该代码，谢谢，但我也使用该bpv运行了一个计算，而输入x持有正确的值，计算认为bpv未定义，不确定我将如何解决这个问题？@Donkeypunter这是一个更具体的问题。如果您可以将代码粘贴到JSFIDLE上，我可以考虑您的问题并尝试提出解决方案

$(document).ready(function(){
   // your code here
});

  <head>
  <script>
  var bpv;
  document.addEventListener("DOMContentLoaded", function(event) {
    getPrice();
  });

  function getPrice(){
    $.ajax({
      dataType:"json",
      type: 'GET',
      url:'https://blockchain.info/ticker',
      success: function(data){
        bpv = data.USD.last;
        setPriceInput(bpv);    
      }
    });
  }

  function setPriceInput(value) {
    var input = document.getElementById('bp');
    input.value = value;
    input.disabled = false;
  }
  </script>
  </head>
  <body>
    Value of Bitcoin ($)<br/>
    <input type="text" id="bp" value="" disabled>
  </body>