動(dòng)畫過程中的bug
根據(jù)老師的實(shí)現(xiàn)我自己寫了一段代碼，跟老師的不太一樣，但是動(dòng)畫過程中有一定幾率出現(xiàn)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的寬度設(shè)置為600px，left值也為-600px，然后執(zhí)行代碼，在動(dòng)畫過程中反復(fù)觸發(fā)鼠標(biāo)事件?；蛘咧苯佑|摸span標(biāo)簽。有時(shí)候動(dòng)畫就一直執(zhí)行，閃來閃去，不會(huì)停止。
我的分析是mouseover的結(jié)束條件是left>=0，mouseout的結(jié)束條件是left<=-600，當(dāng)在動(dòng)畫過程中，即mouseover未結(jié)束時(shí)，又觸發(fā)了mouseout事件。left的值就可能永遠(yuǎn)位于-600到0之間。動(dòng)畫就不會(huì)停止。
請問大神這樣分析對不？有什么方法解除這種bug？
另外如果要實(shí)現(xiàn)無論是否在動(dòng)畫執(zhí)行過程中，鼠標(biāo)over上時(shí)，left就增加，鼠標(biāo)移開，馬上left減小這樣的效果，有什么方法？
2017-10-03
又看了下代碼： 發(fā)現(xiàn)了其實(shí)主要是沒能有效的清除定時(shí)器的問題，把代碼改成下面這樣就可以運(yùn)行。
<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>將函數(shù)提出來放到事件外面定義效率更高，再將兩個(gè)move函數(shù)合并在一起代碼會(huì)更簡潔。
2017-09-30
為了讓問題更清晰，我把代碼copy下來，大家可以自己試下效果。 這動(dòng)畫執(zhí)行過程中多次快速觸發(fā)鼠標(biāo)事件，有驚喜哦??！
<!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); ????????????????} ????????????} ????????} ? ????}2017-05-31
實(shí)際上只需要把onmouseover和onmouseout改成onmouseenter和onmouseleave就行了，over和out指代的是鼠標(biāo)經(jīng)過和移出，實(shí)際上你從div移動(dòng)到span中按道理來說還是在div內(nèi)，但是因?yàn)樯婕傲藄pan的移入移出則會(huì)出現(xiàn)事件冒泡。換成enter和leave(穿入穿出)后不會(huì)觸發(fā)span事件，所以不會(huì)出問題，你可以試試
2017-05-31
把你的計(jì)時(shí)器settimeout換成setInterval看看，雖然兩個(gè)方法都是延時(shí)加載，但是作用有所不同