Bootstrap 工具提示函数被异步调用。如何在调用下一个函数之前等待它完成？

Question

在我下面的函数中，我想确保第一个 tooltip("destroy") 完成，然后我的下一行 takeScreenshot() 被执行。不幸的是 Bootstrap 官方文档指出 tooltip("destroy") 是一个异步函数，因此在下面的代码中，即使在工具提示被销毁之前，takeScreenshot() 也会被执行。

目前我尝试了两种方法：

方法 1：使用异步 - 等待：这没有解决问题。

方法二：使用setTimeout延迟执行takeScreenshot()。这解决了问题，但它似乎是 hack 而不是标准解决方案。

在 Javascript 或 Jquery 中有什么方法可以解决这个问题吗？

下面是我的代码，它不能同步运行:(

const processScreenshot = () => {
  $('#draggableDiv').tooltip("destroy"); // this line is asynchronous in nature
  takeScreenshot()  // this line gets executed 1st before previous line returns
}

Answer 1

因为您提到 "destroy" 而不是处置（Bootstrap 4 使用处置而不是销毁），我认为您使用的是 Bootstrap 3.x。有了这个假设，您应该能够像这样收听 'hidden.bs.tooltip'：

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // do something…
})

参考：https://getbootstrap.com/docs/3.3/javascript/#tooltips and confirmation of intended behavior / merge request resolving issue where this was broken: https://github.com/twbs/bootstrap/issues/13031

这可以让您确定工具提示至少已被隐藏。我没有看到任何实际被销毁的事件。

Bootstrap 工具提示函数被异步调用。如何在调用下一个函数之前等待它完成？

Bootstrap tooltip function is called asynchronously. How to wait for it to finish before calling next function?

jquery

async-await

twitter-bootstrap

twitter-bootstrap-tooltip