javascript - 上一行完成后运行一行jQuery

Question

我有两行 jQuery，我需要一行在前一行完成后运行。

我知道 js 是逐行读取的，但是第二行发生得太快了。

我不能使用 jQuery 回调，因为不幸的是这些函数没有它们。

我尝试执行 setTimeout() 并等待 500 毫秒、1000 毫秒和 1600 毫秒，但它似乎不起作用。从视觉上看，第二行发生在第一行完成之前。

第一个选择器中使用的元素有一个 1s 的 css 转换，我希望它完成然后第二行发生。

是否可以这样做:

如果转换完成，运行js否则等待，然后检查转换是否完成，如果为真则运行 js。

下面是两行js:

$('#searchInput').removeClass('slideBack').css('top', 0);
$('#headerTopBar').css('position', 'relative').hide();

Answer 1

如果您想等待 CSS 转换完成，则需要在执行转换的对象上为 CSS transitionend 事件使用 eventListener。然后，这将提供一个事件处理程序回调，您可以在 CSS 转换完成后执行第二行代码。

$('#searchInput').one("transitionend", function(e) {
    $('#headerTopBar').css('position', 'relative').hide();
}).removeClass('slideBack').css('top', 0);

现在，在现实世界中，并非每个浏览器都对过渡结束事件使用相同的事件名称，因此通常要么为过渡结束事件的所有可能名称安装事件处理程序，要么在您的代码中确定哪个名称是在此本地浏览器中使用，然后将该变量用作事件名称。

注意:我使用 .one() 以便此事件处理程序在触发后自动卸载。我不确定您是否想要它，但通常需要这些类型的事件通知。

这是一个更详细的版本，它监听所有可能的过渡结束事件名称(适用于所有主流浏览器):

$('#searchInput').one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
    $('#headerTopBar').css('position', 'relative').hide();
}).removeClass('slideBack').css('top', 0);