仅在完成另一个事件的回调后才在事件中运行回调

Question

我正在使用一个使用ajax的库来检索我网站的内容。该库提供了何时加载内容以及加载完成后的监听器。

我的代码如下：

document.addEventListener('turbolinks:click', function(e) {
  // Possibly does some loading or animations...
}

document.addEventListener('turbolinks:load', function(e) {
  // Code here should start running after code in 'turbolinks:click' is finished.
}

我希望实现的是turbolinks:load回调中的代码只应在turbolinks:click中的代码完成之后运行。

因此，例如turbolinks:click会触发一个需要三秒钟才能加载的动画。如果turbolinks:load事件在这三秒钟内触发，它应该等到三秒钟过去，如果它在那之后触发它可以立即运行。

我希望这是有道理的，有人可以指导我正确的方向，谢谢！ ：）