JSFiddle - React, Tailwind, and code Playground

by wllai2001

HTML

<div class="wapper">
    
    <div class="floatdiv">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSXzuEgwB8HIMizoJ6sHEljrefv99Me1qmrzqku8zFKsITSxYA1lA" alt="">
    
    </div>
    
</div>

CSS

.wapper {width:100%;height:100%;}
.floatdiv {top:100px;width:100px;height:100px;border:1px solid #ccc;position: absolute;}

JavaScript

/*浮動視覺效果測試*/


function loop (){    
   $(".floatdiv").animate({"top":"50px"},2000)
   .animate({"top":"100px"},2000);
    setTimeout("alert('OK');",4000);
   setTimeout(loop, 4000);
   //研究：為何loop()就會有堆疊溢位的問題發生。
   //setTimeout(loop(), 4000)
    
}
loop();

/*結論：許多遞迴方式直接呼叫函式，導致瀏覽器判定呼叫堆疊次數過多。
目前唯有使用setTimeout的方式延遲呼叫能夠避免錯誤訊息出現。
*/