Question

我正在使用js和php开发一个简单的仓库信息系统作为web应用程序。系统基本上将仓库存储分成包含多个级别的块。假设仓库包含9行9列（如9x9矩阵）。所以仓库有81个街区。每个街区有5个级别。

在我的前端，我有一个空的5行表，用于显示块的级别。我写了一个js / jquery函数'blockRender（currentBlock）'来渲染块的级别。该函数使用ajax调用从php后端提取有关块状态的数据。 ajax的成功回调会将占用级别的背景变为灰色（空级别没有背景）。

现在我想编写普通的js代码来检查某个级别是否被占用。我做的是首先调用blockRender（currentBlock），然后检查这个级别（表格行）是否呈现为灰色，以便我知道它是否被占用。

这样的事情：

HTML：

    <table>
       <tr id="lv_1"/>
       <tr id="lv_2"/>
       ...
       <tr id="lv_5"/>
    </table>

//js
function blockRender(currentBlock){
   $.ajax({
     success: function(){
       //render the table
     }
   });//
};

blockRneder(currentBlock);

if(document.getElementById("lv_1").style.background == "grey"){
  alert("occupied");
}else{
  alert("empty");
}

但问题是：正常的js代码总是在ajax回调之前执行，即使我先调用render函数。所以我总是得到一个完全空的表（所有行都没有背景颜色），因为它总是在呈现表之前检查状态。

我怎么能让'blockRender（currentBlock）'首先渲染表，然后执行我的js代码来检查阻止状态？

PS：'blockRender（currentBlock）'本身运行正常。它总是可以提取数据并成功渲染块。

Answer 1

这是由于js的异步性质。您需要确定以编程方式执行的顺序。

或者：

function doThisFirst(x){
  $.ajax({
      url: 'someurl', 
      success: function(result){
        thenDoThis(result)
    }
  });
};

doThisFirst(x);

function thenDoThis(result) {
  if(document.getElementById("lv_1").style.background == "grey"){
    alert("occupied");
  }
  else{
    alert("empty");
  }
}

或

function doThisFirst(x){
  $.ajax({
      url: 'someurl', 
      success: function(result){
  if(document.getElementById("lv_1").style.background == "grey"){
    alert("occupied");
  }
  else{
    alert("empty");
  }
    }
  });
};

doThisFirst(x);

如何在调用ajax回调函数后执行js / jquery代码

1 个答案: