                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

動畫過程中的bug

根據老師的實現我自己寫了一段代碼，跟老師的不太一樣，但是動畫過程中有一定幾率出現bug。代碼如下：

	<script>
		window.onload=function(){

			var?myDiv=document.getElementById('box1');
			var?timer=null;
			myDiv.onmouseover=function(event){
				timer=setTimeout(move,30);

				function?move(){
					clearTimeout(timer);
					if(myDiv.offsetLeft>=0)?return;
					else{
						myDiv.style.left?=?myDiv.offsetLeft?+?5?+'px';
						setTimeout(move,30);
					}
				}
			}

			myDiv.onmouseout=function(event){
				timer=setTimeout(move,30);

				function?move(){
					clearTimeout(timer);
					if(myDiv.offsetLeft<=-600)?return;
					else{
						myDiv.style.left?=?myDiv.offsetLeft?-5?+'px';
						setTimeout(move,30);
					}
				}
			}

		}
		
		

	</script>

我把div的寬度設置為600px，left值也為-600px，然后執行代碼，在動畫過程中反復觸發鼠標事件?；蛘咧苯佑|摸span標簽。有時候動畫就一直執行，閃來閃去，不會停止。

我的分析是mouseover的結束條件是left>=0，mouseout的結束條件是left<=-600，當在動畫過程中，即mouseover未結束時，又觸發了mouseout事件。left的值就可能永遠位于-600到0之間。動畫就不會停止。

請問大神這樣分析對不？有什么方法解除這種bug？

另外如果要實現無論是否在動畫執行過程中，鼠標over上時，left就增加，鼠標移開，馬上left減小這樣的效果，有什么方法？

charsandrew

2017-05-30

源自：JS動畫效果 2-1

關注問題我要回答

1527

操作

收起

4 回答

charsandrew 提問者
2017-10-03

又看了下代碼：發現了其實主要是沒能有效的清除定時器的問題，把代碼改成下面這樣就可以運行。

<script>
????window.onload=function(){
????????var?myDiv=document.getElementById('box1');
????????var?timer=null;?????????
????????myDiv.onmouseover=function(event){
????????????move();?
????????????function?move(){
????????????????clearTimeout(timer);
????????????????if(myDiv.offsetLeft>=0)?return;
????????????????else{
????????????????????myDiv.style.left?=?myDiv.offsetLeft?+?5?+'px';
????????????????????timer?=?setTimeout(move,100);
????????????????}
????????????}
????????}
??
????????myDiv.onmouseout=function(event){
????????????move();?
????????????function?move(){
????????????????clearTimeout(timer);
????????????????if(myDiv.offsetLeft<=-600)?return;
????????????????else{
????????????????????myDiv.style.left?=?myDiv.offsetLeft?-5?+'px';
????????????????????timer?=?setTimeout(move,100);
????????????????}
????????????}
????????}
????}
</script>

將函數提出來放到事件外面定義效率更高，再將兩個move函數合并在一起代碼會更簡潔。

0 回復有任何疑惑可以回復我~

收起回答

charsandrew 提問者
2017-09-30

為了讓問題更清晰，我把代碼copy下來，大家可以自己試下效果。這動畫執行過程中多次快速觸發鼠標事件，有驚喜哦??！

<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
body{margin:?0;padding:?0;}
#box1{
width:?600px;
height:?100px;
background-color:?#f00;
left:?-600px;
position:?relative;
}
#box1?span{
width:?20px;
height:?50px;
background-color:?#00f;
position:?absolute;
left:?600px;
top:?25px;
}
</style>
</head>
<body>
<div?id="box1">
<span?id="share">分享</span>
</div>
<script>
????window.onload=function(){
????????var?myDiv=document.getElementById('box1');
????????var?timer=null;
????????
????????myDiv.onmouseover=function(event){
????????????timer=setTimeout(move,100);
?
????????????function?move(){
????????????????clearTimeout(timer);
????????????????if(myDiv.offsetLeft>=0)?return;
????????????????else{
????????????????????myDiv.style.left?=?myDiv.offsetLeft?+?5?+'px';
????????????????????setTimeout(move,100);
????????????????}
????????????}
????????}
?
????????myDiv.onmouseout=function(event){
????????????timer=setTimeout(move,100);
?
????????????function?move(){
????????????????clearTimeout(timer);
????????????????if(myDiv.offsetLeft<=-600)?return;
????????????????else{
????????????????????myDiv.style.left?=?myDiv.offsetLeft?-5?+'px';
????????????????????setTimeout(move,100);
????????????????}
????????????}
????????}
?
????}

0 回復有任何疑惑可以回復我~

收起回答

慕尼黑2796912
2017-05-31

實際上只需要把onmouseover和onmouseout改成onmouseenter和onmouseleave就行了，over和out指代的是鼠標經過和移出，實際上你從div移動到span中按道理來說還是在div內，但是因為涉及了span的移入移出則會出現事件冒泡。換成enter和leave(穿入穿出)后不會觸發span事件，所以不會出問題，你可以試試

0 回復有任何疑惑可以回復我~

收起回答

charsandrew 提問者

謝謝回答。改成onmouseenter 和 onmouseleave試了下，比前面稍微好了寫，但在動畫執行過程中多次反復出發 onmouseenter和onmouseout時，依然有時會出現動畫卡住的bug。

2017-09-30 回復有任何疑惑可以回復我~