在dropdown.js中隐藏vs隐藏事件

Question

我是一名研究活动的JS开发人员，我需要你们的帮助。我有一个非常直截了当的问题。在浏览dropdown.js的代码时，我遇到了以下几行JS：

$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget));

if (e.isDefaultPrevented()) return;

$this.attr('aria-expanded', 'false');
$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget);

我注意到'隐藏'之前是如何触发事件'隐藏'。

现在，引导程序文档会在这些事件中出现：

  

hide.bs.dropdown ::隐藏时会立即触发此事件   已经调用了instance方法。

     

hidden.bs.dropdown下拉菜单结束时会触发此事件   被隐藏的用户（将等待CSS转换，到   完成）。

请注意，只有在完成向用户隐藏的下拉列表后，文档隐藏才会被触发。我的问题是：代码的放置是导致hide首先触发而hidden触发第二个吗？

也可以找到代码行here。

编辑:: :: 我的意思是如果我要在hidden之前放置hide事件，引导文档是否仍然正确？

Answer 1

如果你看看第一个事件和第二个事件之间发生了什么，你会看到这个

 $this.attr('aria-expanded', 'false');
 $parent.removeClass('open') // and then .trigger('hidden.bs.dropdown', relatedTarget);

所以上面提到的两行负责实际隐藏元素。这意味着，只要hide.bs.dropdown放在这两行之前，hidden.bs.dropdown放在它们之后，那么文档就是正确的

Answer 2

您的问题的简短回答是否 - 代码的位置/顺序并不能确保隐藏隐藏的内容＆＃34;触发＆＃34;按顺序。在 hide.bs.dropdown()被解雇之后，完全有可能延迟hidden.bs.dropdown()的全部或部分执行，直到。

浏览器有一个称为event loop的内部循环，用于处理排队的事件/函数/等。 ＆＃34;代码的位置＆＃34;在您的示例中，仅显示将这些函数/事件添加到此队列的顺序。

以下是使用setTimeout()将函数推送到队列末尾的示例：

＆＃13;

＆＃13;

// the timeout delay is 0, but it still moves the 'delayEvent' to the end of the queue:
$(document).on("delayEvent", {
  foo: "bar"
}, function(event) {
  setTimeout(function() {
    console.log(event.data.foo);
  }, 0);
});


$(document).on("fifoEvent", {
  bim: "baz"
}, function(event) {
  console.log(event.data.bim);
});


$(document).trigger("delayEvent"); // bar
$(document).trigger("fifoEvent"); // baz

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;