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);
        }
    }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值