來回動畫的封裝—練習定時器和函式封裝的思想
阿新 • • 發佈：2018-11-10
要點：
1.定時器原本只打開一個，在不做任何處理的時候，如果在上一個定時器執行完成之前快速點選按鈕。定時器的所執行的函式的速度，會不斷的加快 ，自己臆測的原因是，多執行緒，同時開啟多個定時器，不會等到上一個處理完成之後來處理下一個，而是類似於多執行緒的原理，共同的處理定時器繫結的處理函式。
2.理解封裝思想，這個函式，原來只是處理單一的功能，而封裝之後，將需要的不同的物件介面暴露出來，功能模組程式碼進行封裝，使用者傳遞物件就可以對不同的目標物件執行相同的函式操作。
例子中的element.intervalName，原來是通過var進行宣告得到的，這樣會多申明一塊空間的操作，執行的效率會慢一點，而這樣在已有的物件的空間中新增一個新的屬性，會提高執行速度。一點一滴的積累，到最後會是量的質變。
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } input{ margin-top: 20px; } div{ margin-top: 30px; width: 225px; height: 175px; background-color: #6D1F9B; position: absolute; /*一定要是相對定位，不然寫的移動的位置不能改變而顯示出來*/ } </style> </head> <body> <input type="button" value="移動500px" id="btn1"> <input type="button" value="移動1000px" id="btn2"> <div id="div"></div> <script type="text/javascript"> function myGet(id){ return document.getElementById(id); } myGet("btn1").onclick = function(){ animate(myGet("div"),500); } myGet("btn2").onclick = function(){ animate(myGet("div"),1000); } function animate(element,target){ clearInterval(element.intervalName); // 每次點選移動按鈕的時候,清理定時器,將原來的定時器清理掉,不然會疊加多執行緒多個定時器,加快速度 element.intervalName = setInterval(function(){ var current = element.offsetLeft; // 通過.style.left不能獲取style標籤裡面的值，只能獲取到內部樣式的值 // 而.offsetLeft這個值，可以獲取到任何位置，div這個屬性的.left的值，不帶單位 var step = 8; // 每次增加10畫素 step = current<target?step:-step; // 判斷是在目標的左邊還是右邊，從而判斷是前進還是後退 current += step; if(Math.abs(target-current)>Math.abs(step)){ element.style.left = current + "px"; }else{ clearInterval(element.intervalName); element.style.left = target + "px"; // 當執行到最後一步時，如果不滿增加的長度，而再一次執行時，而又超過目標畫素的距離， // 所以設定直接一步到目標距離,而不會 } },30) } </script> </body> </html>
效果：
