JavaScript-window对象-定时器_window对象中定时器有-优快云博客

JavaScript-window对象-定时器

window对象包含4个定时器专用方法，setTimeout()，clearTimeout()，setInterval()，clearInterval()。

1、setTimeout(code, delay)延时器

参数code表示要延迟的代码字符串，如果包含多个语句，应该使用分号进行分隔。delay表示延迟时间，以毫秒为单位。clearTimeout()取消由setTimeout()方法生成的定时器对象。
示例：

// setTimeout(),延时执行，只执行一次，clearTimeout()取消定时器
setTimeout(f1 ,5000);
function f1(){
    console.log("延时五秒执行！")
}

2、setInterval(code, interval)循环器

我们通常只记得延时器而忽略了还有一个循环器，可以用来周期性执行代码。循环器用法与延时器类似，也有两个参数，code表示循环执行的代码，interval表示周期执行的时间间隔，也以毫秒为单位。clearInterval()取消由setInterval()方法生成的定时器对象。
示例：

// setInterval(),周期执行，循环执行，clearInterval()取消定时器
let out = setInterval(f2, 1000);
let t = 0
function f2(){
    t = t+1
    console.log("打印第", t,"次！");
    if (t>4){
        clearInterval(out);
        alert("停止循环！");
    }
}

亲自试一试

完整代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BOM-浏览器对象模型相关示例-定时器</title>
    <script>
        // 定时器
        // setTimeout(),延时执行，只执行一次，clearTimeout()
        setTimeout(f1, 5000);

        function f1() {
            console.log("延时五秒执行！")
        }
        // setInterval(),周期执行，循环执行，clearInterval()
        let out = setInterval(f2, 1000);
        let t = 0

        function f2() {
            t = t + 1
            console.log("打印第", t, "次！");
            if (t > 4) {
                clearInterval(out);
                alert("停止循环！");
            }
        }
    </script>
</head>

<body>
</body>

</html>