浅谈JS实现图片轮播的各种坑

首先在文章之前，我要好好地吐槽一下当下很多人的学习方法。就拿我们实验室的人来说吧。不少人自称是搞前端的，随随便便让他们写个slider，都能用JQuery很快实现。他们意识里的前端就以为是精通JQuery，精通Bootstrap。当然，你如果是真的“精通”了，那么你也很厉害。但是如果你没有研究过JQuery和Bootstrap的源码的话。千万不要在我面前说精通。我会很鄙视你的。可是呢，如果让这些人用纯JS去实现一个slider，他们居然就愣了。硬着头皮写出来的也是各种BUG。大哥，要是前端都是随随便便的“HTML+CSS+JS的表单验证”（我舍友不经大脑思考就是这么认为的），那前端工程师早就绝种了。

好了，进入正题。也许实现一个slider挺简单的。但是首先你要确定你自己有一定的功底。像我这种功底不扎实的孩纸，写个slider会遇到不少坑。

其实我写过不少slider。GITHUB上也有一个slider的插件。算是效果挺多的。但是其实现在看来写得挺烂的。要是迟点去面试被面试官看到，我的脸都不知道往哪儿搁了。

总结一下，写slider一般会遇到的坑吧：

1. 布局定位——这从来都是第一个坎儿。如果你要做兼容，那么这个坑会更大。所以说前端不好混啊。

2. 逻辑思维——相信我，首先你就要头脑清醒，否则很快你就会绕晕了。

3. JS作用域及闭包——不用质疑，你肯定会遇到闭包和作用域的问题。

4. 代码的异步执行带来的队列阻塞——也许你不懂，除非你思维敏捷，否则这个坑多多少少都会碰到，这牵涉到setTimeout和setInterval两个函数。

5. JS浮点数运算误差——这个坑我遇到过，其他人我就不敢肯定你会遇到，毕竟这个是和各人的代码实现有关。

6. 元素位置和尺寸获取及兼容性问题——如果你需要做兼容，肯定逃不掉

看吧，就一小小的slider就有如此多的坑。只有你真的落实去做了，你可能才会有所感触，否则你只会当我在吹水而已。当然，slider的坑还远不止这些。如果你要再深入的话，还会遇到包括性能以及可维护性等问题。

在这里，我想只针对第四个坑来解释一下。因为这个坑是坑了我最久的一个坑了。我是看了别人的一些成熟的slider后才找到解决方案的。

稍微熟悉JS的人可能知道，setTimeout和setInterval是通过计算时间然后采用向代码执行队列中插入代码的形式实现的。也就是说，如果代码队列前的代码执行时间超过了你设置的间隔时间，那么setTimeout和setInterval是不能预期执行的，而这就是我说的队列阻塞。而此时你需要一个合理的条件判断来跳出循环。否则代码队列会因为setTimeout和setInterval的滞后而无限叠加。

看懵了吧？我来举个例子：

var a = setInterval(function() {
  // some code
  // 不考虑兼容问题
  arr[next].style.left = arr[next].offsetLeft - 20 + 'px';
  if(arr[next].offsetLeft <=0 ) {
    clearInterval(a);
    cur = next;
    next += 1;
  }
}, 3000);

这段代码看似可能没有问题，但是如果setInterval事件叠加在代码队列中超过一定数量之后，我们手动更改了next的值，导致对象由arr[next]变为arr[next+1]，那么这个Inertval很可能还会继续执行下去，因为arr[next+1]对象的offsetLeft可能是大于 0 的。

好吧，可能大家会看不懂我的意思。我也觉得这个坑要形容起来挺困难的。总之大家想去了解的话，自己动手试一试就知道了。