从一个轮播图看多线程

今天用运动框架做了一个无缝轮播图，因为感觉做这个轮播图收获很大，通过js的同步和异步代码分析，第一次对多线程有了亲身的理解，源码放到了GitHub上。https://github.com/chengminggit/seamlessCarousel.git。
要做到无缝轮播，就需要“欺骗用户”。

轮播案例

表面上看是有8张图片，但是实际上有10张，在第一张的前面有一张和最后一张一样的图片，同理在最后一张的后面有一张和第一张一样的图片，当用户在第一张点击上一张的按钮后，会执行动画跳到“假的”最后一张，当动画结束后，迅速把图片换成“真的”最后一张，因为这个过程太快了，人的眼睛无法分辨，从而实现以假乱真。
但是，执行动画的代码是异步代码，而最后的切换图片只有一行代码，是同步代码，js代码的执行顺序是先执行同步代码，后执行异步代码，如果在执行轮播动画切换的代码后面直接写如下代码：

animetion(oImg,{
   left:(-336*index)
   },{
      time : 600,
      type : "Bounce",//规定运动曲线
      typeAction : "easeOut"//曲线类型
   });
   li();
oImg.style.left = -336*index + "px";

那么实际的执行顺序是这样的：

oImg.style.left = -336*index + "px";
animetion(oImg,{
   left:(-336*index)
   },{
      time : 600,
      type : "Bounce",//规定运动曲线
      typeAction : "easeOut"//曲线类型
   });
   li();

没错，最后一句代码因为是同步代码，所以执行的顺序优先于上面的异步代码，但是这不是我们想要的，这就好比有两个线程A、B，我们明明希望A先执行，而后B在执行，但是实际的情况却正好相反。
所以这就需要给B线程加一把锁，而钥匙放在A线程的代码执行最后，只有A线程执行结束，才能获得这把锁，从而打开B线程。代码如下：

 flag = true;
 if(index>=9 && flag){
      index = 1;
      oImg.style.left = -336*index + "px";
 }
  if(index<=0 && flag){
      index = 8;
      oImg.style.left = -336*index +"px";

开始设置flag为false，只有当A线程（即运动的动画）执行结束，才将这把锁的钥匙拿到（flag置为true）。这就满足了要求。
以上就是从一个轮播图中理解的多线程，当程序中线程多的时候，原理也可以去类比。另外这个轮播图是自己用原生js封装的运动框架，以及运动方式用到的是Tween.js里的函数，可以根据自己的需求去定制，这里不再赘述，源码中的注释都很详细。