码迷,mamicode.com
首页 > 其他好文 > 详细

setTimeout和setInterval实现滚动轮播中,清除定时器的思考

时间:2015-12-16 16:58:08      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:

PS:希望各路大神能够指点

 

setTimeout(function,time):单位时间内执行一次函数function,以后不执行;对应清除定时器方法为clearTimeout;

setInterval(function,time):单位时间内执行一次函数function,以后一直重复执行函数;对应清除定时器方法为clearInterval;

其中function为函数名,假设其函数名为AutoPlay,其中如果写成AutoPlay,则表示这个函数,写成AutoPlay()则表示函数执行后的结果。但是两种写法函数最终都会执行。

当然我们也可以通过函数可以调用自身的特性用setTimeout来创建一个永久循环的函数,那么它的效果似乎和setInterval一样了,但实际上在细微之处是有区别的

setTimeout:

eg1:
function Automatism(){ func1... //函数执行话费时间400ms setTimeout(Automatism(), 300); } setTimeout(Automatism(), 600); //实际是:func1 400s,600ms后在执行400s,

setInterval: 

eg2:
function Automatism(){ func1... //函数执行话费时间400ms
} setInterval(Automatism(), 600);  //实际是:func1开始执行时已开始计时,每隔600ms执行一次

 

清除定时:

清除定时人人都会,但这次我在撸轮播的过程中却发现无论如何也清不掉,经过几次测试才发现是因为使用setTimeout调用了自身的缘故.如何eg1中例子,即当我们使用setTimeout来达到重复执行的时候clearTimeout似乎失效了(目前不知道原因,请高手指点啊)。

最后换用setInterval可以正常工作。

 

最后贴上代码:

HTML:

<div class="companyBusiness" id="companyBusiness">
	<dd id="album">
		<img src="../images/companyBusiness.png" />
		<img src="../images/companyBusiness.png" />
		<img src="../images/companyBusiness.png" />
		<img src="../images/companyBusiness.png" />
	</dd>
	<p id="circle">
		<span class="on"></span>
		<span></span>
		<span></span>
		<span></span>
	</p>
</div>

 

CSS:

.companyBusiness{position: relative;width: 340px;height: 200px;overflow: hidden;display: inline-block;vertical-align: top;}
.companyBusiness dd{position: relative;display: inline-block;vertical-align: top;width: 1360px;transition: margin-left 0.8s ease-in-out;}
.companyBusiness dd img{width: 340px;height: auto;vertical-align: top;}
.companyBusiness p{position: absolute;bottom: 14px;right: 14px;}
.companyBusiness p span{display: inline-block;width: 7px;height: 7px;border-radius: 20px;background-color: #fff;margin-left: 5px;}
.companyBusiness p span.on{background-color: #da1622;}
.foucs_middle dt{width: 311px;display: inline-block;vertical-align: top;}
.foucs_middle dt img{width: 100%;height: auto;}

JS(清除定时器):

var timer = null;
$("#circle span").click(function(){
	clearTimeout(timer);
	var _thisIndex = $(this).index();
	var dis = -(_thisIndex) * parseInt($("#companyBusiness").width());
	$("#album").css("margin-left", dis);
	$(this).addClass("on").siblings().removeClass("on");
	timer = setTimeout("AutoPlay()", 3000);
});
function AutoPlay() {
	var _thisIndex = $("#circle span.on").index();
	_thisIndex++;
	if (_thisIndex > 3) _thisIndex = 0;
	$("#circle span").eq(_thisIndex).trigger("click");
	setTimeout("AutoPlay()", 3000);
}
$(function() {
	timer = setTimeout("AutoPlay()", 3000);
})

JS(不能清除定时器):

var timer = null;
$("#circle span").click(function(){
	clearInterval(timer);
	var _thisIndex = $(this).index();
	var dis = -(_thisIndex) * parseInt($("#companyBusiness").width());
	$("#album").css("margin-left", dis);
	$(this).addClass("on").siblings().removeClass("on");
	timer = setInterval("AutoPlay()", 3000);
});
function AutoPlay() {
	var _thisIndex = $("#circle span.on").index();
	_thisIndex++;
	if (_thisIndex > 3) _thisIndex = 0;
	$("#circle span").eq(_thisIndex).trigger("click");
}
$(function() {
	timer = setInterval("AutoPlay()", 3000);
})

  

 

setTimeout和setInterval实现滚动轮播中,清除定时器的思考

标签:

原文地址:http://www.cnblogs.com/circulatttt/p/5051434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!