轮播图指示器动画制作，removeClass后addClass无效？用神奇的setTimeout(fn, 0)解决动画重置问题

在给banner指示器做动画的时候出了个问题。先放一个我想要的效果如下：鼠标移入时轮播停止计时，移出后重新计时

(后来用纯CSS实现了，效果更好一些，可看bootstrap4轮播图指示器动画代码 - 轮播进度条)

这里用的是bootstrap的banner，需要在原有的指示器上加before或after实现。

费我时间的是，banner:hover时需要将before动画重置，但是before是伪类，不在dom节点上，不可以直接操作。经过一番深思熟虑，只有操作.active最有效(bootstrap会在当前显示的banner添加active类)

/* 指示器动画 begin*/
.carousel-indicators>li{
    position: relative;
    background-color: rgba(170, 170, 170, 0.8);
}
.carousel-indicators .active::before {
    content: "";
    position: absolute;
    background-color: #fff;
    left: 0;
    height: inherit;
    width: 0px;
    animation: banner-active 3s linear infinite;
}
@keyframes banner-active{
    from {width: 0px;}
    to {width: inherit;}
}
/* 指示器动画 end */

那么只能用jquery实现了(没用前后端分离)，一开始我是这么写的

$("#home-banner").hover(function(){
    $(".carousel-indicators .active").removeClass("active").addClass("active")
},function(){
    $(".carousel-indicators .active").removeClass("active").addClass("active")
})

然而removeClass之后紧接着用addClass，并不能起到重置的效果，这两行代码相当于没执行。。

这种问题不好百度，最后结合了很多个方法，改成如下。解决了

$("#home-banner").hover(function(){
    var abanner = $(".carousel-indicators .active").removeClass("active")
    setTimeout(function(){
        abanner.addClass("active")
    },0);
},function(){
    var abanner = $(".carousel-indicators .active").removeClass("active")
    setTimeout(function(){
        abanner.addClass("active")
    },0);
})

我也不知道具体为什么，用js单线程也觉得解释不了，如果是同步执行的按说一开始写的是可以的呀。最后还是用setTimeout的异步来解决了。(具体的原因可能有 js对dom的操作原理、浏览器对css的解析原理)有知道原因的大神还望解答一下

对setTimeout(fn,0)感兴趣的同学可以看看setTimeout(fn, 0)原理，随便推荐几个链接：setTimeout原理、通过setTimeout理解js异步原理、神奇的setTimeout(fn,0)

---

猜想 2020/05/29

纯属推测

• $(".carousel-indicators .active").removeClass("active").addClass("active")之所以不生效：猜想js渲染dom步骤如下
• js渲染dom，要将自己目前线程的执行完之后，一同渲染给dom树。
• 执行.removeClass("active")时js会去dom树中拉取这个节点，形成这么一条数据：key=.carousel-indicators .active，value=["active","class2","class3"](得到的节点的所有class)，然后移除active：value=["class2","class3"]
• 执行.addClass("active")时，在value中加入active：value=["active","class2","class3"]
• 然后继续执行此线程下边的内容
• 最后线程任务执行完毕，这个dom节点的Class数据，其实是没有变化的。js把此线程中的dom操作，传递给dom树渲染，而对于没有变化的东西，dom树并不会重新渲染，但是实际上确实操作了这个节点的class，所以在DevTools中class会闪一下，说明操作了这个class。但是实际上又确实没有改动什么内容。
  • (class1 class2 没有实际意义，为了看DevTools节点操作闪动的范围，是具体的类名还是整个class属性。结果当然是整个class属性)
    
• 而setTimeout()，是异步的，在主线程A外另起了一个B线程，那么对这个class的操作数据，是在A执行完之后执行的(setTimeout原理)，如此一来，dom树就会先去掉active，再加上active。即完成了我们想要的重置动画。

其他思路

有机会试一下：$.parser.parse() 让JQuery框架将页面重新解析一次

---

😁欢迎加入QQ群交流： [游戏-Web-开发技术栈 ☄️] '300567032’
点击下方图标一键加入！

---