javascript - 按顺序执行2个JavaScript函数

Question

我有一个包含两行的函数，我希望它们按顺序执行。函数是:

showNotification(message){
    $("#notificationMessageBody").html(message); // line1
    $("#notificationModal").modal('show');       //line2
}

因此，每当我调用 showNotification("Hello World!") 时，我如何确保 line1 在 line2 之前执行(意味着内容加载在模态触发器之前完成) 基本上，我试图在模态正文中填写我的消息，然后显示它，而不是在填写之前。

--编辑--

这些函数确实一个接一个地执行，但是在 jQuery 将我的 message 加载到我的 #notificationMessageBody 之前我的模态弹出

因此，例如:如果我调用 showNotification("Hello")，我会得到一个带有“Hello”的模态(模态和内容的排列已经完成)，但之后如果我调用 showNotification("World") 模式首先出现“Hello”，然后变为“World”。

注意:“Hello”和“World”是一大堆文本垃圾，所以我相信将它们加载到我的 DIV 中一定需要一些时间。尽管它们是一个接一个地执行的，但看起来(对普通人来说)首先是模态弹出然后替换完成。我希望图片现在有点清晰。

函数周围的任何地方都没有涉及 AJAX。基本上，这是我可以说的自定义 alert() 函数。我的页面中有一个具有正确 ID 的模式。我更改了模态主体内容(使用 jQuery 的 .html() 函数)并触发模态显示，如代码所示。

Answer 1

您可以使用 .promise()方法(在 jQuery 1.6 中添加)以确保在第一个完成后执行第二个:

$("#notificationMessageBody").html(message).promise().done(function() {
    $("#notificationModal").modal('show');  
});