如何等待按钮完成其任务，然后执行下一行代码

Question

我有一个按钮，如下所示，我以编程方式单击。

document.getElementById("generateButton").click();

此按钮创建一个表并从数据库加载数据。

然后，我有选项对表进行排序，如果在url中指定，表将在加载后排序。

if(COL_ONE == "true")
            sortTable("COL_ONE");

我的问题是，这个表大约需要3秒才能加载。因此，进行排序的if语句将在创建表之前运行。因此，排序不会发生。如果我在If语句处放置一个断点，在if语句处停止执行，然后等到我看到表加载时再运行if语句(通过调试器)，那么我的排序就会工作。因此，代码都在工作，这只是想出一种在加载表之前暂停的方法。无论如何，我都可以这样做，在加载表之前，然后运行下一个if语句，我将在页面加载时执行此操作。

Answer 1

在这种情况下，您可以使用回调。

function tableLoaded(callback) {
   //Code to load the table
   callback();
}

在你的主要职能

tableLoaded(function(){
   //have your if statement
   if(COL_ONE == "true")
      sortTable("COL_ONE");
});

Answer 2

请张贴相关的DB代码。

不过，我只能猜测，它看上去与此类似：

document.getElementById("generateButton").addEventListener('click', function() {
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = function() {
      if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
        updateTable(xmlHttp.responseText);
      }
    };
    xmlHttp.open("GET", '/get-info-from-db', true);
    xmlHttp.send();
});

在这种情况下，这是一个简单的更改：

document.getElementById("generateButton").addEventListener('click', function() {
    var xmlHttp = new XMLHttpRequest(); 
    xmlHttp.onreadystatechange = function() {
      if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {
        updateTable(xmlHttp.responseText);
        if(COL_ONE == "true")
          sortTable("COL_ONE");
      }
    };
    xmlHttp.open("GET", '/get-info-from-db', true);
    xmlHttp.send();
});

Answer 3

您绝对必须将排序功能放在回调中，并将其设置为在数据加载后调用。我注意到您可能是异步地将数据加载到表中，即将数据加载到回调函数中，这可能是排序函数在加载之前启动的原因。不要这样做，在调用函数加载数据后立即执行排序。也许如果您告诉我您是如何加载数据的，这样我就可以明确地告诉您何时何地放置带有排序功能的回调函数会更好。例如，如果您使用第三方支持来加载数据，您可能应该尝试在api中找到一个函数调用来加载也接受回调的数据，或者是完成处理程序。对于回调，必须以匿名函数的形式传递排序功能。希望这能帮上忙！