js定时器关闭,js定时器停止,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器

js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器
附上页面的截图,代码在截图下,想看效果就自己复制下边的代码,保存个页面看吧:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clearIntervals()一次关闭所有定时器</title>
</head>
<body>
<div>下面有三个定时器  以不一样的时间间隔输出不同内容</div><br><br>
<input type='button' value='输出“liu” 初始一秒4次' >
<input type="button" value="输出“jin” 初始一秒2次">
<input type="button" value="输出“yu” 初始一秒1次">
<button id='clear' style='margin-left:50px;'>清除所有定时器</button>
<div id="div1"></div>
 
<script type="text/javascript">

    var oDiv = document.getElementById('div1');
    var aInput = document.getElementsByTagName('input');
    var oBtn = document.getElementById('clear');
    var arr = [];
    var txt = '';
    //每次生成的定时器都单独有一个数组里的位置,避免了冲突
    aInput[0].onclick=function(){
        arr.push(setInterval(liu, 250));
    }
    aInput[1].onclick=function(){
        arr.push(setInterval(jin, 500));
    }
    aInput[2].onclick=function(){
        arr.push(setInterval(yu, 1000));
    }
    //调用自定义函数 用一个for循环 关闭数组中存储的所有定时器;
    oBtn.onclick=function(){
        clearIntervals(arr);
    }

    function liu(){
        txt = txt.concat(' Liu')
        oDiv.innerHTML=txt;
        return txt;
    }
    function jin(){
        txt = txt.concat(' Jin')
        oDiv.innerHTML=txt;
        return txt;
    }
    function yu(){
        txt = txt.concat(' Yu')
        oDiv.innerHTML=txt;
        return txt;
    }
    //原理 用一个数组来保存所有定时器的id
    function clearIntervals(array){
        for (var i = array.length - 1; i >= 0; i--) {
            // if (typeof array[i] !== 'undefined') {
                clearInterval(array[i]);
            // };
        };
    }

</script>
</body>
</html>

posted @ 2014-04-16 14:27  刘金宇  阅读(21486)  评论(0编辑  收藏  举报