22 定时器
技术交流QQ群:1027579432,欢迎你的加入!
1.两种定时器
- window对象给我们提供了两个非常好用的方法-定时器。
- setTimeout():用于设置一个定时器,该定时器在定时器到期后执行调用函数。
- 注意:
- window可以省略;
- 这个调用函数可以直接写函数,或者写函数名或者采取'函数名()'三种形式,第三种方式不推荐;
- 延迟时间的单位是毫秒,默认的0;
- 因为定时器可能有很多,所以经常给定时器赋值一个标识符(自定义的定时器名字);
window.setTimeout(调用函数,[延迟的毫秒数]);
- 注意:
- setTimeout()参数中的调用函数也称为回调函数callback。普通函数是按照代码顺序直接调用,而回调函数需要等待时间,时间到了才会去调用这个函数,因此称为回调函数。
- 之前介绍的element.onclick = function(){}或者element.addEventListener('click',function(){});里面的函数也是回调函数。
- 停止定时器clearTimeout():取消了先前通过调用setTimeout()建立的定时器。
- 注意:
- window可以省略;
- 里面的参数就是定时器的标识符(自定义的定时器名字);
window.clearTimeout(timeoutID);
- 注意:
- setInterval():重复调用一个函数,每隔这个时间,就去调用一次回调函数。
- 注意:
- window可以省略;
- 这个调用函数可以直接写函数或者写函数名或者采用字符串'函数名()'三种形式;
- 间隔的毫秒数默认是0,如果写,必须是毫秒。表示每隔多少毫秒就自动调用这个回调函数。
- 因为定时器可能有很多,所以经常给定时器赋值一个标识符(自定义的定时器名字);
window.setInterval(回调函数,[间隔的毫秒数]);
- 注意:
- 停止定时器clearInterval():取消先前通过调用setInterval()建立的定时器。
- 注意:
- window可以省略;
- 里面的参数就是定时器的标识符(自定义的定时器名字);
window.clearInterval(intervalID);
- 注意:
- this的指向:this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁。一般情况下,this最终指向的是那个调用它的对象。
- 全局作用域或普通函数中this指向全局对象window(注意定时器里面的this指向window);
- 对象的方法中谁调用this,它就指向谁;
- 构造函数中this指向构造函数中的实例;
- setTimeout():用于设置一个定时器,该定时器在定时器到期后执行调用函数。