javascript核心技术（四十三）浏览器对象模型BOM(三) 定时器 setTimeout clearTimeout

人亦已歌 · 发表于 2023-1-27 20:21:40

定时器是JS中的延迟命令，即触发该命令后多长时间执行定时器中的代码。
语法如下：

setTimeout(要执行的代码,时间间隔)

复制代码

定时器的定义有三种方式
1、直接在定时器中直接定义函数

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>定时器 setTimeout clearTimeout</title>
</head>
<body>
<script type="text/javascript">
        // setTimeout  设置定时器，3s(3000ms)后输出hello
        // 直接传递函数
        setTimeout(function(){
                console.log('hello');
        }, 3000);
</script>
</body>
</html>

以上代码的实现结果为：3秒后输出hello
javascript核心技术（四十三）浏览器对象模型BOM(三) 定时器 setTimeout clearTimeout

2、先定义函数，再给定时器传递函数名称

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>定时器 setTimeout clearTimeout</title>
</head>
<body>
<script type="text/javascript">
        //先定义函数，再给定时器传递函数名称
        function f1(){
                console.log('hello');
        }
        setTimeout(f1, 3000);
</script>
</body>
</html>

3、给定时器传递一段字符串格式的js代码

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>定时器 setTimeout clearTimeout</title>
</head>
<body>
<script type="text/javascript">
        //传递一段字符串格式的js代码，通常是字符串格式的函数的调用
        function f1(){
                console.log('hello');
        }
        setTimeout("f1()", 3000);
        // setTimeout("console.log('hello');", 3000);
</script>
</body>
</html>

4、清除定时器

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>定时器 setTimeout clearTimeout</title>
</head>
<body>
<script type="text/javascript">
        //清除定时器 clearTimeout  需要使用设置定时器时的返回结果--定时器的编号
        var timeout = setTimeout(function(){
                console.log('hello');
        },3000);
        console.log(timeout);
        clearTimeout(timeout);
</script>
</body>
</html>