定时器-延时函数
(1)JavaScript内置的一个用来让代码延缓执行的函数叫 setTimeout()
语法: setTimeout(回调函数,等待的毫秒数)
(2)setTimeout仅仅只执行一次,所有可以理解为就是把一段代码延迟执行,平时省略window
let timer = setTimeout(回调函数,等待的毫秒数)
清除定时器语法:clearTimeout(timer)
一个小栗子:
3秒前点击按钮则页面不会弹出111(点击按钮则清除延时函数)
<!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>Document</title>
<style>
</style>
</head>
<body>
<button>点击</button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click',function(){
clearTimeout(timer)
})
//延迟函数仅仅执行一次
let timer = setTimeout(function(){
alert(111)
},3000)
</script>
</body>
</html>
(3)结合递归函数可以使用setTimeout实现setInterval(间歇函数)一样的功能
<!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>Document</title>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
function fn() {
// 得到当前时间
div.innerHTML = new Date().toLocaleString()
setTimeout(fn,1000)
}
fn()
</script>
</body>
</html>
(4)间歇setInterval的特征是重复执行,首次执行会延迟
setTimeout的特征是延时执行,只执行一次
setTimeout可以结合递归函数实现setInterval一样的功能
clearTimeout清除由setTimeout创建的定时任务