在上篇文章中我们提到了多次调用定时器，今天我们就利用一个 gft动态图 这样一个demo来处理这个问题
<body>
<div id="warp">
<img src="img/0.jpg" id="idImg" alt="" />
<!--开始-->
<input type="button" name="start" id="start" value="开始" />
<!--结束-->
<input type="button" name="end" id="end" value="结束" />
</div>
</body>
<script type="text/javascript">
//获取对象
//获取图片
var imgObj = document.getElementById("idImg");
//获取开始按钮
var startObj = document.getElementById("start");
//获取结束按钮
var endObj = document.getElementById("end");
//变量
//记录图片的状态
var index = 0;
function nextFunction() {
index++;
if(index > 7) {
index = 0;
}
imgObj.src = "img/" + index + ".jpg";
}
//设个全局变量,将定时器赋给这个全局变量
var timer;
//开始函数
function startFunction() {
//此行代码的作用:清除每次创建的定时器
clearInterval(timer);
//定时器
timer = setInterval(function() {
nextFunction();
}, 100);
}
//结束函数
function endFunction() {
clearInterval(timer);
}
//调用开始按钮
startObj.onclick = startFunction;
//调用结束按钮
endObj.onclick = endFunction;
</script>
就多次调用定时器而言，红色字体的部分至关重要，我们在多次调用定时器的时候，要先清除定时器，方可使用定时器，否则容易出现定时器越来越快的bug