Javascript 如何在下一次执行之前延迟jQuery函数？

我有一个相对简单的jQuery函数，它有一个条件和一些类的添加和幻灯片切换

$('div').on('click', function() {
    if($('#header .nav').hasClass('open')) {
        $('#header .nav').removeClass('open');
        $('#header .nav').slideToggle();
        $('#header .nav').delay(400).removeAttr('style'); <---DELAY THIS LINE
    } else {
        $('#header .nav').addClass('open');
        $('#header .nav').slideToggle();
    }
    $('div').toggleClass('isActive');
});

$（'div'）。在（'click'，function（）上{
if（$（'#header.nav'）.hasClass（'open'））{
$（'#header.nav'）.removeClass（'open'）；
$（'#header.nav'）.slideToggle（）；
$（'#header.nav'）.delay（400）.removeAttr（'style'）；您可以这样做，因为它不适用于队列，类似
animation（）
/
slideDown（）
的方法适用于延迟队列，这就是为什么我们可以用调用链接它们的执行

可以使用简单的setTimeout（）来完成此操作

$('div').on('click', function () {
    if ($('#header .nav').hasClass('open')) {
        $('#header .nav').removeClass('open');
        $('#header .nav').slideToggle();
        setTimeout(function () {
            $('#header .nav').removeAttr('style');
        }, 400)
    } else {
        $('#header .nav').addClass('open');
        $('#header .nav').slideToggle();
    }
    $('div').toggleClass('isActive');
});


您可以通过向队列添加回调来使用延迟，如

$('#header .nav').delay(400).queue(function (nxt) {
    $(this).removeAttr('style');
    nxt();
})


但是您可以将代码简化为

$('div').on('click', function () {
    var $nav = $('#header .nav');
    $nav.toggleClass('open').slideToggle(function () {
        if (!$nav.hasClass('open')) {
            $nav.removeAttr('style');
        }
    })
});

.delay（）方法最适合在排队的jQuery效果之间进行延迟。例如，由于它受到限制，它没有提供取消延迟的方法-.delay（）不是JavaScript本机setTimeout函数的替代品，后者可能更适合某些用例。（来源：）

使用以下命令：

setTimeout(
  function() 
  {
      $('#header .nav').removeAttr('style');
  }, 400);

我认为出于您的目的，您可以使用下面给出的slideToggle，为什么需要编写delay（）或setInterwal，而slideToggle（）提供了此功能，请尝试此功能


$（'div'）。在（'click'，function（）上{
if（$（'#header.nav'）.hasClass（'open'））{
$（'#header.nav'）.removeClass（'open'）；
$（'#header.nav'）.slideToggle（函数（）{
$（this.removeAttr（'style'））；谢谢！所有这些答案都能满足我的需要，但你解释了原因，我很感激！@Thomas Nolan检查我的答案我会在我可以的时候检查，它不会让我检查，这就是为什么我没有检查的原因。@Thomas Nolan你也可以通过使用队列使用上面更新的延迟callback@ArunPJohny据我所知，
delay
可以与effects queue一起使用，因此ink这将无法像我们预期的那样工作。
$（'#header.nav'）。延迟（400）。删除ttr（'style'）；
我刚刚在这里测试了它。如果我错了，请纠正我！@Thomas Nolan嗨，我创建了一个简单的示例，就像你想要的一样，请注意