javascript - 填充隐藏的 div，完成后显示 div

Question

所以我遇到了这个问题:在表单中我有这个按钮。当我点击它时，我希望发生两件事:

1. 使用 $.getJSON(url) 填充隐藏 div 中的字段
2. 完成后，显示 div

只不过每次，div 都会在设置字段值之前显示，因此您可以看到值正在更改。

这是我尝试过的:

var promise = $.getJSON(url);
var done = promise.done(function(data){
    //setting the value for the fields in the hidden div
});
if (done){
    showHide(id); //show the div
}

仅供引用，showHide(id) 是在外部 Javascript 文件中定义的函数，而其余代码是在 jsp 文件中的脚本标记内定义的(我显然包含了 Javascript 文件)。

我还尝试将 showHide 函数放入匿名函数中，但在这种情况下，根本不会调用 showHide (就好像它没有被识别一样)。

我能做什么？提前致谢

Answer 1

您可以使用Promise来实现这一点。

在新的 Promise 中做任何你想做的事情。完成后解决它，然后在.then()

中执行接下来的操作

var promise = new Promise((resolve, reject) => {
  //I'll use a setTimeout here to demonstrate
  setTimeout(function(){
    $('#toShow').text('I\'m done here !');
    resolve();
  },2000);
});

promise.then(function(){
  console.log($('#toShow').text());
});

div{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toShow"></div>