已经使用clearInterval() ,为什么还是无法清除定时器?

Question

代码及运行效果均可在jsbin中查看:

代码及运行效果

Answer 1

注意你是通过timer变量来保存定时器ID的，并且处在全局作用域中，每个定时器的id用的是同一个变量也就是timer储存的，理想的情况下，触发事件，timer保存ID，然后满足条件时读取timer清除对应的定时器。但是由于事件一下子被多次触发，第一次写入timer的ID早就被后面的写入覆盖掉了，当满足条件清除时通过timer已经找不到原来的定时器了。

简单改下就行了

var content = document.querySelector(".content"),
    timer = null;

content.addEventListener("mouseover",function(){

  console.log("调用mouseover");
   var  timer = setInterval(function(){  //通过加var，使timer变成本地变量，从而使每一个定时器都有一个独立的timer保存id，不会出现覆写的情况
    if(content.offsetLeft == 0){
      //清除定时器
      clearInterval(timer);  //这里不是清除定时器了吗?为什么还是会输出那么多A
      console.log("A");
    }else{
      content.style.left = content.offsetLeft + 1 + "px";
    }
  },10);
});
});

Answer 2

应该是mouseover判定多次，setInterval存在多个，clearInterval只清除了一个

content.addEventListener("mouseover",function(){
  if(timer) return
...