JS中setinterval定时器多次调用越走越快无法清除的问题

在图片轮播中点击下一张图片按钮，setinterval定时器多次初始化，导致清除失效

在使用定时器做图片轮播时，连续两次点击下一张图形会越走越快，清除定时器失效

<div class="out">
    <div id="container">
        <a href="#" id="left" onclick="goRightTimmer()"><</a>
        <a href="#" id="right" onclick="goLeftTimmer()">></a>
        <ul id="box">
            <li><img src="/img/1.jpg"></li>
            <li><img src="/img/2.jpg"></li>
            <li><img src="/img/3.jpg"></li>
            <li><img src="/img/4.jpg"></li>
            <li><img src="/img/1.jpg"></li>
        </ul>
    </div>
</div>

    var rightTimmer;
    var leftTimmer;
    function goLeftTimmer() {
        leftTimmer = setInterval("goleft()", 5);
    }
    function goleft() {
        var container = document.getElementById("container");
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
        }
        container.scrollLeft += 5;
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
            clearInterval(leftTimmer);
        } else if (container.scrollLeft % 810 === 0) {
            clearInterval(leftTimmer);
        }
    }

原因：

用console.log(lefttimmer)可以看出这个lefttimmer不是定时器本身，它只是一个用于传递的返回值，如果把他当成一个可以覆盖的值每次都清除再初始化就错了，  每一次给timer赋值都是在创建新的定时器对象，之前的定时器也并没有被清除，所以这时候调用clearInterval(timer)只是清除了最后一个timmer   所以肉眼可以看到点击一次轮播正常，连续点两次就会一直轮播

解决方法：

方法一：在每次单击初始化定时器操作前，把定时器清除

    var rightTimmer;
    var leftTimmer;

    function goLeftTimmer() {
        clearInterval(leftTimmer);//清除定时器
        leftTimmer = setInterval("goleft()", 5);
    }

    function goleft() {
        var container = document.getElementById("container");
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
        }
        container.scrollLeft += 5;
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
            clearInterval(leftTimmer);
        } else if (container.scrollLeft % 810 === 0) {
            clearInterval(leftTimmer);
        }
    }

 方法二：可通过for循环清除页面所有定时器 简单粗暴

var rightTimmer;
var leftTimmer;

document.getElementById("left").onclick = function(){
        leftTimmer = setInterval("goleft()",5);
}

function goleft() {
        var container = document.getElementById("container");
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
            console.log(container.scrollLeft);
        }
        container.scrollLeft += 5;
        if (container.scrollLeft === 3240) {
            container.scrollLeft = 0;
            for (var i = 1; i<=leftTimmer; i++){//用for循环清除页面所有定时器
                clearInterval(i);               
            }
            // clearInterval(leftTimmer);
            console.log(container.scrollLeft);
        } else if (container.scrollLeft % 810 === 0) {
            for (var i = 1; i<=leftTimmer; i++){
                clearInterval(i);
            }
            // clearInterval(leftTimmer);
            console.log(container.scrollLeft);
        }
    }