在前一行代码完成后运行一行jQuery

Run a line of jQuery after the previous one is complete

本文关键字：一行 运行 jQuery 代码      更新时间：2023-09-26

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

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

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

我试着做一个setTimeout()等待500ms, 1000ms和1600ms，但它似乎没有工作。从视觉上看，第二行发生在第一行完成之前。

在第一个选择器中使用的元素有一个1s的css过渡，我希望它结束，然后第二行出现。

是否可以这样做:

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

下面是js的两行代码: 
$('#searchInput').removeClass('slideBack').css('top', 0);
$('#headerTopBar').css('position', 'relative').hide();

如果你想等待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);

.css()不接受回调，您可以使用.animate()代替:

$('#searchInput').removeClass('slideBack').animate({top:0},500,function () {
    $('#headerTopBar').css('position', 'relative').hide();
});
相关文章：