2：定时器

知识梳理

// 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(){} 这个匿名函数也是回调函数