定时器（间隔函数+延迟函数+回调函数）

原创已于 2023-04-03 11:27:48 修改 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2023-03-23 19:53:44 首次发布

JavaScript 专栏收录该内容

63 篇文章

订阅专栏

文章详细介绍了JavaScript中的定时器，包括间隔函数setInterval和延迟函数setTimeout的使用方法及区别，以及如何关闭定时器。此外，还阐述了回调函数的概念和在事件监听中的应用，对比了DOML0和DOML2事件监听的差异，强调了addEventListener的优势。

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发；例如：网页中的倒计时；要实现这种需求，需要定时器函数；定时器函数有两种: 间隔函数和延迟函数。

一、定时器-间隔函数

定时器函数可以开启和关闭定时器

1. 开启定时器语法：setInterval(函数，间隔时间)

2.作用：每隔一段时间调用这个函数

3.注意：

（1）间隔时间单位是毫秒

（2）函数名字不需要加括号

（3）定时器返回的是一个id数字

2. 关闭定时器

定时器一般不会刚创建就停止，而是满足一定条件再停止

需要定时器变量名来关闭；返回的是一个唯一的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器-间隔函数</title>
</head>
<body>
    <script>
        // 1.开始定时器 setInterval(函数 ， 间隔时间)
        const timer = setInterval(function() {
            console.log('hi~')
        },1000)   // 每隔1秒调用
        // 返回值 ID
        console.log(timer)
        // 清除定时器
        // clearInterval(timer)
    </script>
</body>
</html>

二、延迟函数

1.JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

2.开启延迟函数语法：（setTimeout 回调函数，等待毫秒数）

3.清除延时函数：clearTimeout (延迟函数名称)

4.延迟函数（setTimeout）和间隔函数（setInterval）的区别

（1）setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window

（2）间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window

5.注意点

（1）延时函数需要等待,所以后面的代码先执行

（2）返回值是一个正整数，表示定时器的编号

三、回调函数

1.回调函数：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数（回头调用的函数）

2.作用：

（1）把函数当做参数传递给另外一个函数，这个函数就叫回调函数

（2）回调函数本质还是函数，只不过把它当成参数使用

（3）使用匿名函数做为回调函数比较常见

（4）作用是完成某些特定任务

3.事件监听的新旧版本：

（1）DOM L0 ：事件源.on事件类型 = function() { }

（2）DOM L2 ：事件源.addEventListener(事件类型，事件处理函数)

（3）区别：on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用

代码分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听-新旧版本对比</title>
</head>
<body>
    <button>按钮</button>

    <script>
        const btn = document.querySelector('button')
        console.log(btn)
        // 老版本（DOM L0）
        // btn.onclick = function(){
        //     alert('111')
        // }
        // btn.onclick = function(){
        //     alert('222')
        // }

        // on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用

        // 新版本 （DOM L2）

        btn.addEventListener('click' , function(){
            alert('333')
        })

        btn.addEventListener('click' , function(){
            alert('444')
        })



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