修复轮播图加速Bug-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42599236/article/details/86619307

案例：定时自动转换背景图片

定时器效果叠加：例如轮播图；

每次执行一次鼠标移入移出的行为，会发现播放的速度将会加快，越来越快，越来越快

<body>
		<div id="wrap">
			<ul id="box">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>1</li>
				<li>2</li>
			</ul>
		</div>
		
		<script>
			var num = 0;
			var obox=document.getElementById('box');
			var lists=document.getElementsByTagName('li')
			var timer;
			function gogo(){
			timer=setInterval(function(){
				num--;
				if(num<-12){
					num=0;
				}
				obox.style.left=num*100+'px';
			},200);
			}
				for(var j=0;j<lists.length;j++){
					lists[j].onmouseenter=function(){
                       clearInterval(timer);            
                    }
					lists[j].onmouseleave=function(){
							gogo();
				}
		</script>
	</body>

此时，每次触发一次鼠标移出事件，定时器会叠加，解决方法：clearInterval(timer)之后再执行gogo();如下：



	
				for(var j=0;j<lists.length;j++){
					lists[j].onmouseenter=function(){
                       clearInterval(timer);            
                    }
					lists[j].onmouseleave=function(){
                   clearInterval(timer);    
							gogo();
				}
		</script>
	</body>

此时不再叠加了。