一个简单的回调函数使用
- 单次定时器setTimeout(),只能定时一次
启动单次定时器:setTimeout(第一个参数是多少毫秒之后要调用的回调函数,第二个参数是毫秒,1000ms等于1s)
<script>
setTimeout(function(){
document.write("2秒之后调用回调函数");
}, 2000);
</script>
或者这样写,将函数定义在外面
fnction demo(){
console.log("3000ms后调用回调函数");
}
setTimeout(demo, 3000);
- 多次定时器 setInterval(),循环定时器,间隔指定时间执行一次代码功能
每隔两秒执行一次回调函数;
var i = 0;
setInterval(function(){
console.log(i);
i++;
}, 2000);
- 清除多次定时器 clearInterval(),用单次定时器等待多长时间后停止多次定时器
var i = 0;
var set = setInterval(function(){ //接收的set是定时器启动的标识符
console.log(i);
i++
}, 2000);
setTimeout(function(){
clearInterval(set) // 使用单次定时器让上面的循环定时器执行三次之后
}, 6500); // 清除循环定时器 clearInterval(要清除的定时器的标识符)
或者在多次定时器内部当某个条件满足时也可以清除定时器
/*定义一个div标签,宽高都为50px;*/
<div id="item1" style="width: 50px; height: 50px; background: red;"></div>
/*通过id属性获取元素,并赋给变量odiv*/
var odiv = document.getElementById('item1)
var i = 50;
/*定时器启动之后返回一个描述符并赋给变量set,描述符用于等会清除这个定时器*/
var set = setInterval(function(){
i++;
/*每隔50ms让这个元素的宽高各增加1px;*/
odiv.style.height=i+'px';
odiv.style.width=i+'px';
/*判断 i 等于200的时候清除定时器*/
if (i==200){
clearInterval(set);
};
}, 50);