第三章 web前端开发工程师--JavaScript进阶程序设计 3-10 定时器的管理

JavaScript 定时器管理

本节课所讲内容：

JavaScript定时器管理

主讲教师：Head老师

一. JavaScript定时器管理

javaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和毫秒数的超时时间。

setTimeout("alert('Lee')", 1000);				//不建议直接使用字符串

function box() {
	alert('Lee');
}
setTimeout(box, 1000);						//直接传入函数名即可

setTimeout(function () {						//推荐做法
	alert('Lee');
}, 1000);

PS：直接使用函数传入的方法，扩展性好，性能更佳。

调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用的ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。

要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它。

var box = setTimeout(function () {				//把超时调用的ID复制给box
	alert('Lee');
}, 1000);

clearTimeout(box);							//把ID传入，取消超时调用

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接受的参数与setTimeout()相同：要执行的代码和每次执行之前需要等待的毫秒数。

setInterval(function () {						//重复不停执行
	alert('Lee');
}, 1000);

<script>
        /*
            setInterval(函数,时间)
        */
        var i=0;
        var time = null;
        function fn1(){
            i++;
            document.title = i;     //输出到页面标题
            if(i == 10){
                clearInterval(time);
            }
        }
        time = setInterval(fn1,200);
    </script>

应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> setInterval 定时器</title>
</head>
<body>
    <input type="button" value="换图片">
    <input type="button" value="停止">
    <script>
        var aBtn = document.getElementsByTagName('input');
        var arrUrl = ['img/01.png', 'img/02.png', 'img/03.png', 'img/04.png'];
        var num = 0;
        var timer = null;
        var oBody = document.body;

        aBtn[0].onclick=function(){

            clearInterval(timer);    //null 未定义

            timer = setInterval(function(){
                oBody.style.background = 'url('+arrUrl[num]+')';
                num++;
                num%=arrUrl.length;
            }, 1000);
        };
        aBtn[1].onclick=function(){
            clearInterval(timer);
        };
    </script>
</body>
</html>

下面的不关闭网页就不会停止：

<input type="button" value="换图片">
    <input type="button" value="停止">
    <script>
        var aBtn = document.getElementsByTagName('input');
        var arrUrl = ['img/01.png', 'img/02.png', 'img/03.png', 'img/04.png'];
        var num = 0;
        var timer = null;
        var oBody = document.body;

        aBtn[0].onclick=function(){
            timer = setInterval(function(){
                oBody.style.background = 'url('+arrUrl[num]+')';
                num++;
                num%=arrUrl.length;
            }, 1000);
        };
        
    </script>

第三章 web前端开发工程师--JavaScript进阶程序设计 3-10 定时器的管理

JavaScript 定时器管理

猜你喜欢