网页中经常会需要一种功能:每隔一段时间需要
自动
执行一段代码,不需要我们手动去触发 ;例如:网页中的倒计时 ;要实现这种需求,需要
定时器函数 ;
定时器函数有两种:
间隔函数
和 延迟函数。
一、定时器-间隔函数
定时器函数可以
开启
和
关闭
定时器
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
则不会,同时拥有事件更多特性,
推荐使用
![](https://img-blog.csdnimg.cn/4ffd24770b5745f2bf1cb31ee645d73d.png)
代码分析:
<!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>