js中配合使用setInterval和setTimeout完成图片走停效果

let's do something

图片走停效果/或者说走马灯效果

图片走停效果因该是走马灯效果的升级版，而且制作难度上也是稍微增加的。如果使用jQuery会很容的做出来，但是如果使用setInterval和setTimeout二者结合来做的话则需要一些技巧。

我个人虽然做了出来，但是仍是有些疑问。

要求：

使用几个图片做成一个横向的果冻效果，这个滚动要求在每个图片走完后整体滚动停止两秒钟。

code

var distance = 1;
var interval;
var timeout;
startTurn();
var turn = document.getElementsByClassName('products')[0];
turn.onmouseover = function(){stopTurn()};
turn.onmouseout = function(){startTurn()};
function turnLeft() {
     if(distance % 163 == 0) {//如果一个图片走完之后，则会停止两秒再执行，原理是此时interval此时已不存在
         stopTurn();
         timeout = setTimeout(startTurn,2000);//清除interval，使滚动能够出现暂停效果。
     }
    if (distance == 978) distance = 1;
    turn.scrollLeft = distance;
    distance++;
  }
function stopTurn() {
    clearInterval(interval);
    clearTimeout(timeout);//这个也是要清除的，不然在几秒钟过后会出问题
}
function startTurn() {
    interval = setInterval(turnLeft, 50);
}
//事实证明，即使在setInterval中设置的重新在此执行程序的时间小于程序执行需要的时间，程序
//也会在执行完之后在执行Interval

要点

代码中使用了window对象中的setInterval和setTimeout方法，setTimeout用来停止前者，代码之所以能够安全的运行并不出现错误，在于setTimeout调用清除Interval，这样的话，在每次interval调用turnLeft方法时，此时的他本身就不存在了。