知识梳理
// timeout 暂停;超时
// interval 间隔 简歇
一 单次定时器：setTimeout();
1）基本语法：
// window.setTimeout(回调函数,[延迟的毫秒数]);
2）三种调用方式
//直接写匿名函数 window.setTimeout(function () { alert('100'); },1000); //函数名调用 window.setTimeout(funName,1000); //字符串函数名 [ 不推荐 ] window.setTimeout('funName',1000) function fun() { alert(200); }
3）注意事项
// 1 window 可以省略
// 1 延迟的毫秒数默认是0 如果写必须是毫秒 1秒 = 1000毫秒 // 3 定时器有很多 我们会给定时器赋值标识符 var time1 = setTimeout();
4）小案例：5秒后自动关闭广告
<script> window.addEventListener('load',function () { var ad = document.querySelector('#ad'); window.setTimeout(function () { ad.style.display = 'none'; },5000) }); </script> <div id="ad">广告条</div>
5）清除单次定时器
// clearTimeout(定时器名字);
二 重复定时器 setinterval
1）基本语法
// window.setInterval(回调函数,[间隔毫秒数]);
// 重复调用一个函数，每隔一个时间，就调用一次回调函数
// 使用和setTimeout一摸一样
2）代码范例
window.setInterval(function () { console.log(10); },1000);
//没间隔一秒 就执行一次函数 打印10
3）清除重复定时器
// clearInterval(定时器名字);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button class="begin">开启定时器</button> <button class="stop">停止定时器</button> <script> var begin = document.querySelector('.begin'); var stop = document.querySelector('.stop'); var timer = null; // 全局变量 null是一个空对象 begin.addEventListener('click', function() { timer = setInterval(function() { console.log('ni hao ma'); }, 1000); }) stop.addEventListener('click', function() { clearInterval(timer); }) </script> </body> </html>
//定时器变量一定要在全局作用域下
回调函数
1）普通函数按照代码顺序直接调用
2）回调函数：回调，就是回头调用的意思。上一件事干完，再回头调用这个函数
3）element.onclick = function(){} 这个匿名函数也是回调函数