如何在添加类 div 后面添加类延迟或删除类执行？答案

【问题标题】：How to add class delay or remove class execute in behind add class div?如何在添加类 div 后面添加类延迟或删除类执行？
【发布时间】：2019-05-03 02:53:48
【问题描述】：

滑块包含三张幻灯片，当单击第一张幻灯片时，它会添加类并剪辑（隐藏），与第二张和第三张幻灯片相同。

HTML 代码

<div class="wrapper">
    <div class="slides">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>

CSS 代码

.slider-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    color: #fff;
    background: #000;
}

.slide {
    position: absolute;
    width: 95%;
    height: 100%;
    padding: 80px 40px; 
    text-align: center;
    background: #333;
    clip: rect(0 1060px 660px 0);
    -webkit-transition: linear .5s;
    transition: linear .5s;

}
.slide:nth-child(1) {
    background-color: #404040;
    z-index: 3;
}
.slide:nth-child(2) {
    z-index: 2;
}
.slide:nth-child(3) {
    background-color: #404040;
    z-index: 1;
}
.slide-clip {
    clip: rect(0 0 660px 0);
}

jQuery 代码

$('.slide').click(function() {
  var $target = $(this).next();
  if ($target.length == 0)
    $target = $('.slide:first');

  $(this).delay(1000).addClass('slide-clip');
  $target.removeClass('slide-clip');
});

我希望当第二张幻灯片在此之前或在第三张幻灯片之后添加类和剪辑（隐藏）时，第一张幻灯片取消剪辑并与第三张幻灯片单击相同，第二张幻灯片取消剪辑在第一张幻灯片后面。

【问题讨论】：

标签： jquery

【解决方案1】：

delay() 方法仅适用于 jQuery 动画队列，因此不会对addClass() 方法造成任何延迟。要在 1 秒后添加 class，您可以使用 setTimeout 方法。

setTimeout(() => $(this).addClass('slide-clip') , 1000);

【讨论】：

感谢您的回复，我使用了它，但在控制台中，发现 setTimeOut 未定义的错误，请您改进您的答案以解决此问题。
是的，问题已解决，但没有任何功能在点击时执行。它卡住了。
@Ramesh : 哎呀，也解决了这个问题......这是关于范围问题......使用箭头功能它将修复
好的，我对箭头函数没有深入的了解，你能帮我解决这个问题。谢谢
@Ramesh : setTimeout(() => $(this).addClass('slide-clip') , 1000);