多次调用定时器

来源：互联网发布：大数据安全分析编辑：程序博客网时间：2024/05/21 09:58

在上篇文章中我们提到了多次调用定时器，今天我们就利用一个 gft动态图这样一个demo来处理这个问题

<body>

<divid="warp">

<imgsrc="img/0.jpg" id="idImg" alt=""/>

<inputtype="button" name="start" id="start"value="开始" />

<inputtype="button" name="end" id="end"value="结束" />

</div>

</body>

//获取对象

//获取图片

varimgObj = document.getElementById("idImg");

//获取开始按钮

varstartObj = document.getElementById("start");

//获取结束按钮

varendObj = document.getElementById("end");

//变量

//记录图片的状态

varindex = 0;

functionnextFunction() {

index++;

if(index> 7) {

index = 0;

}

imgObj.src = "img/" +index + ".jpg";

}

//设个全局变量,将定时器赋给这个全局变量

vartimer;

//开始函数

functionstartFunction() {

//此行代码的作用:清除每次创建的定时器

clearInterval(timer);

//定时器

timer= setInterval(function() {

nextFunction();

}, 100);

}

//结束函数

functionendFunction() {

clearInterval(timer);

}

//调用开始按钮

startObj.onclick = startFunction;

//调用结束按钮

endObj.onclick = endFunction;

</script>

就多次调用定时器而言，红色字体的部分至关重要，我们在多次调用定时器的时候，要先清除定时器，方可使用定时器，否则容易出现定时器越来越快的bug

0 0