js中定时器的主要语法有以下四个:
添加定时器:
- setTimeout("js语句",时间)
- setInterval("js语句",时间)
删除定时器(此处的timer(自定义)是定时器的顺序,在后面的部分我会介绍到):
- clearTImeout(timer)
- clearInterval(timer)
然后我们介绍一下它们的具体用法:
setTimeout 只能执行一次,请看下面的代码:
<div class="container"></div>
<script>
var div = document.querySelector('.container');
function print() {
let fragment = document.createDocumentFragment();
var box = document.createElement('div');
box.setAttribute('class','box1')
fragment.append(box)
div.append(fragment)
}
var timer = setTimeout('print()',1000);
</script>
执行的效果如下面所示(只能生成一个小盒子)
setInterval中这个函数可以无限循环执行,将上面的倒数第二行代码替换成如下代码,则效果会有天差别的的变化:
var timer = setInterval('print()',1000);
执行的效果如下图所示,可以无限次生成盒子:
也可以直接将函数写在定时器中,具体可看个人喜好.如下面的代码:
var x = setInterval(function(){
let fragment = document.createDocumentFragment();
var box = document.createElement('div');
box.setAttribute('class','box1')
fragment.append(box)
div.append(fragment)
},1000);
定时器是有顺序的,当文件中存在多个定时器时,想要删除定时器就要通过定时器的返回值(即该定时器在文件中的顺序来进行删除),比如我在下面的代码中添加三个定时器,然后打印他们的值.
var timer1 = setTimeout('print()',1000);
var timer2 = setTimeout('print()',1000);
var timer3 = setTimeout('print()',1000);
var timer4 = setTimeout('print()',1000);
console.log(`我是第一个定时器${timer1}`);
console.log(`我是第二个定时器${timer2}`);
console.log(`我是第三个定时器${timer3}`);
console.log(`我是第四个定时器${timer4}`);
打印的结果如下图所示
想要清除定时器就要用clearTimeout() 和clearInterval()来清除已经设置的定时器,两者均只接受一个参数. 如下面的代码,清除刚才设置的四个定时器
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
clearInterval(timer4);