jQuery滑块动画无法正常工作

Question

我正在创建一个博客模板，我在其上添加了一个自制的jQuery滑块，它使用递归的setTimeout（）进行无限幻灯片迭代。

幻灯片中的图像是并排的，幻灯片以下列方式工作：

1. 第一张图片淡出并附加到其父级的最后一个位置。
2. 所以第二张图片现在变成了第一个孩子，同样的事情发生了。
3. 幻灯片继续以这种方式运行。

问题是，有时幻灯片显示会发生疯狂，并且多次会同时淡出所有图像并淡入淡出。几秒钟后，幻灯片再次开始正常运行。

请让我知道错误的位置。

JSFiddle

＆＃13;
＆＃13;
setTimeout(function run() {
  fade_out();
  setTimeout(run, 3000);
}, 3000);

// var first_child;
// setInterval(fade_out,3000);
// setInterval also causes the same problem

function fade_out() {
  first_child = $('.timeline-list li:first');
  first_child.fadeOut(1000);

  setTimeout(function() {
    $('.timeline-list').append(first_child);
    first_child.fadeIn();
  }, 1000);
}
＆＃13;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  width: 1140px;
  margin: 0 auto;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.timeline-container {
  overflow: hidden;
  position: relative;
}

.timeline-title {
  text-align: center;
  font: 120%;
  color: #D35400;
  width: 200px;
  height: 125px;
  background-color: #fff;
  border: 1px solid #D35400;
  line-height: 130px;
}

.timeline-list {
  list-style: none;
  width: 1600px;
  height: 125px;
  position: absolute;
  left: 200px;
  top: 0;
  z-index: -1;
  margin-left: 2px;
}

.timeline-list li {
  width: 200px;
  height: 125px;
  background: #000;
  overflow: hidden;
  float: left;
  color: #fff;
  border-right: 1px solid #fff;
  line-height: 125px;
  text-align: center;
}
＆＃13;
<section class="timeline">
  <div class="row">
    <div class="timeline-container clearfix">
      <div class="timeline-title">My Timeline</div>
      <ul class="timeline-list clearfix">
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
        <li>Image 4</li>
        <li>Image 5</li>
        <li>Image 6</li>
      </ul>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
＆＃13;
＆＃13;
＆＃13;

Answer 1

向我的小朋友问好requestAnimationFrame

requestAnimationFrame是你的朋友

requestAnimationFrame的好处

  

  
1. 它们经过浏览器优化，因此它们可以在大多数情况下以60fps的速度运行（也就是动画的最佳位置）。
  
2. 停止在非活动标签中发生的动画。这意味着如果用户离开您的标签并且您有动画，则表示该动画   释放它在CPU上的据点。
  
3. 由于上述性能和尊重，低端设备和移动设备的电池寿命和页面响应能力更强   浏览器。
  

如果您有在Javascript中执行动画的冲动，那么您可能已经使用setTimeout或setInterval来实现此目的。这有很多原因，其中最大的原因是他们会从访问者的浏览器中汲取性能并将他们的小手机电池压平。

这两个功能的问题很简单。他们不了解使用浏览器和在正确的时间绘制内容的微妙之处。他们没有意识到页面其余部分发生了什么。这些特性使它们在为动画提供动力时非常低效，因为它们经常要求重新绘制/更新，而浏览器根本就没有准备好。你经常会跳过跳帧和其他可怕的副作用。

阅读此Article，此处阅读requestAnimationFrame DOC

function fade_out() {
  first_child = $('.timeline-list li:first');
  first_child.fadeOut(1000);

  setTimeout(function() {
    $('.timeline-list').append(first_child);
    first_child.fadeIn();
    requestAnimationFrame(fade_out);
  }, 3000);
}
requestAnimationFrame(fade_out);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  width: 1140px;
  margin: 0 auto;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.timeline-container {
  overflow: hidden;
  position: relative;
}

.timeline-title {
  text-align: center;
  font: 120%;
  color: #D35400;
  width: 200px;
  height: 125px;
  background-color: #fff;
  border: 1px solid #D35400;
  line-height: 130px;
}

.timeline-list {
  list-style: none;
  width: 1600px;
  height: 125px;
  position: absolute;
  left: 200px;
  top: 0;
  z-index: -1;
  margin-left: 2px;
}

.timeline-list li {
  width: 200px;
  height: 125px;
  background: #000;
  overflow: hidden;
  float: left;
  color: #fff;
  border-right: 1px solid #fff;
  line-height: 125px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="timeline">
  <div class="row">
    <div class="timeline-container clearfix">
      <div class="timeline-title">My Timeline</div>
      <ul class="timeline-list clearfix">
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
        <li>Image 4</li>
        <li>Image 5</li>
        <li>Image 6</li>
      </ul>
    </div>
  </div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>