复习笔记之API(10) 定时器

定时器

• window对象给我们提供了两种定时器
  • setTimeout()
  • serInterval()

setTimeout()

语法规范：window.setTimeout(调用函数, [延迟的毫秒数]);

• setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数(window在调用的时候可以省略)

// 这个延迟时间单位是毫秒，但是可以省略，如果省略默认是0、
// 这个调用函数可以直接写函数，还可以写函数名 或者'函数名()'
// 页面中可能存在很多定时器，可以给定时器加标识符(名字)用于区分
setTimeout(function() {
    console.log('砰~');
}, 2000);
// 第二种
function callback() {
    console.log('砰砰~');
}
setTimeout(callback, 2000);
// 第三种
function callback() {
    console.log('砰砰~');
}
setTimeout('callback()', 2000); // 不提倡这种写法

页面中可能存在很多定时器，可以给定时器加标识符(名字)用于区分

function callback() {
    console.log('砰砰~');
}
let time1 = setTimeout(callback, 3000);
let time2 = setTimeout(callback, 5000); 

• setTimeout()定时器里面的调用函数可以直接写函数或者写函数名或者采用字符串函数名()三种形式，第三种不推荐
• 延迟的毫秒数省略默认是0，如果写，必须是毫秒
• 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

停止setTimeout()定时器

window.clearTimeout(timeoutID) 停止定时器

<!-- 点击按钮停止定时器 -->
<button>点击停止定时器</button>
<script>
    let btn = document.querySelector('button');
    let timer = setTimeout(function() {
        alert('砰~');
    },5000);
    btn.addEventListener('click', function() {
        clearTimeout(timer);
    })
</script>

回调函数的引入

setTimeout()里面的函数被称为回调函数 callback

• 普通函数是按照代码顺序直接调用的；而定时器里的这个函数，需要等待时间，时间到了才去调用这个函数，因此被称为回调函数
• 简单理解：回调，就是回头调用的意思，上一件事做完，再回头调用这个函数
• element.onclick = function() {}或者element.addEventListener('click', fn); 里面的函数也是回调函数

serInterval()

语法规范：setInterval(回调函数, [间隔的毫秒数]);

• serInterval()方法重复调用一个函数，每间隔这个时间，就去调用一次回调函数
• window可以省略，这个函数可以直接写函数、写函数名、采取字符串函数名()三种形式(不推荐使用第三种方式)
• 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每间隔多少毫秒就自动调用这个函数
• 因为定时器有很多，所以我们经常给定时器赋值一个标识符

// 语法规范：setInterval(回调函数, [间隔的毫秒数]);
setInterval(function() {
    console.log('继续输出');
}, 1000);
// setTimeout 延时时间到了，就去调用这个回调函数，只调用一次就结束这个定时器
// setInterval 每间隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

停止serInterval()定时器

window.clearInterval(intervalID) 停止定时器

• clearInterval()方法取消了先前通过setInterval()创建的定时器
• window可以省略(里面参数就是定时器的标识符)

<button class="begin">开启定时器</button>
<button class="stop">关闭定时器</button>
<script>
    let begin = document.querySelector('.begin'),
        stop = document.querySelector('.stop'),
        timer = null;
    begin.addEventListener('click', function () {
        timer = setInterval(function () {
            console.log(11);
        }, 3000);
    });
    stop.addEventListener('click', function () {
        clearInterval(timer);
    })
</script>

this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般this最终指向那个调用它的函数

• 全局作用域或普通函数中的this指向全局对象window(定时器里面的this指向window)
• 方法调用中谁调用,this就指向谁(this指向方法的带用者)
• 构造函数总的this指向构造函数的实例