JavaScript（18）

Qwe7

发布于 2022-04-08 11:17:17

5050

发布于 2022-04-08 11:17:17

文章被收录于专栏：网络收集

2、setInterval()和clearInterval()

在JavaScript中，我们可以使用setInterval()方法来设置“重复性”调用的函数。其中clearInterval()可以用来取消执行setTimeout()方法。

语法：

var 变量名 = setInterval (code , time);

说明：

参数code可以是一段代码，也可以是一个调用的函数名；

参数time表示时间，表示要过多长时间才执行code中的内容，单位为毫秒。

setTimeout()方法与setInterval()方法的语法很相似，实际上这两者在用法方面区别非常大。其中setTimeout()方法内的代码只会执行一次，而setInterval()方法内的代码会重复性执行，除非你使用clearInterval()方法来取消执行。

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

    <script type="text/javascript">

        //定义全局变量，用于记录秒数

        var n = 5;

        window.onload = function () {

            //设置定时器，重复执行函数countDown()

            var t = setInterval("countDown()", 1000);

        }

        //定义函数

        function countDown() {

            //判断n是否大于0，因为倒计时不可能有负数

            if (n > 0){

                n--;

                document.getElementById("num").innerHTML = n;

            }

        }

    </script>

</head>

<body>

    <p>新年倒计时：<span id="num">5</span></p>

</body>

</html>

在浏览器预览效果如下：

分析：

window.onload表示在页面加载完毕执行，在“JavaScript页面相关事件”我们会详细讲解到。

setInterval()方法会重复执行某一段代码或函数。如果这个例子使用setTimeout方法就不能实现了，因为setTimeout()方法只会执行一次，而setInterval()会重复执行。

举例：


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript">

        //定义全局变量，用于记录秒数

        var n = 0;

        window.onload = function () {

            //设置定时器，重复执行函数add()

            var t = setInterval("add()", 1000);

            //点击“暂停”按钮事件

            document.getElementById("btn_pause").onclick = function () {

                clearInterval(t);

            }

            //点击“继续”按钮事件

            document.getElementById("btn_continue").onclick = function () {

                if (confirm("你还要继续装逼？")){

                    t = setInterval("add()", 1000);

                }

            }

        }

        //定义计时函数

        function add() {

            n++;

            document.getElementById("num").innerHTML = n;

        }

    </script>

</head>

<body>

    <p>你已经装了<span id="num">0</span>秒的“逼”，赶紧暂停吧！</p>

    <input id="btn_pause" value="暂停" type="button"/>

    <input id="btn_continue" value="继续" type="button" />

</body>

</html>

在浏览器预览效果如下：