Skip to main content

[WebAPIs] 計時與動畫 Timer with setInterval, setTimeout, requestAnimationFrame

  • requestAnimationFrame:要自己 call 自己〈自體循環〉,才會有下一次。不用設時間,會根據執行時間的快慢(延遲)做調整。這是處理動畫首選。函式內預設就會產生 time 這個變數。
  • setTimeout
  • setInterval

window.requestAnimationFrame#

See the Pen Super Simple requestAnimationFrame Thing by PJCHEN (@PJCHENder) on CodePen.

// Polyfill for browser capability
var requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
requestAnimationFrame(animation); // 開始啟動 requestAnimationFrame
$('#stop').on('click', function () {
cancelAnimationFrame(requestID);
});
function animation(time) {
// Do whatever ...
console.log(time); // function 中可以代 time 就可以看到執行的時間點
requestID = requestAnimationFrame(animation);
}

❗ 如果想要停止該 function 繼續執行,一種是不要繼續在該函式呼叫 requestAnimationFrame,另一種則是使用 cancelAnimationFrame,後者記得要把每一次執行後的 requestID 都存起來。

使用例子 @ CodePen

window.setTimeout#

利用 setTimeout(函數, 等待時間) 重複執行函數

var timerId;
function delayedAlert() {
timerId = window.setTimeout(slowAlert, 2000); // 設定計時器
}
function slowAlert() {
alert('That was really slow!');
}
function clearAlert() {
window.clearTimeout(timerId); // 清除計時器
}

代入參數(Passing Arguments)#

如果有需要在 setTimeout,可以在代入時間的參數後再代入其他自訂的參數:

function animal(firstName, lastName = 'Chen') {
console.log(`${firstName} ${lastName}`);
}
setTimeout(animal, 500, 'Po Jung', 'Chen');

重複呼叫 setTimeout 參數(Recursive setTimeout Calls)#

由於 setInterval 可能會在下一個還沒做完就做下一次,而且會超過時間〈延遲〉,所以也可以使用 Recursive setTimeout Calls:

let i = 0;
function increment() {
i++;
console.log(i);
}
let timer = setTimeout(function myTimer() {
increment();
timer = setTimeout(myTimer, 1000);
}, 1000);
// let's cancel after 7 seconds
setTimeout(() => {
console.log('Cancelling');
clearTimeout(timer);
}, 7000);

window.setInterval#

  • 利用 setInterval(函數, 時間) 啟動
  • 利用 clearInterval(timerId) 停止計時
var intervalId;
function changeColor() {
intervalId = setInterval(flashText, 500); // 啟動計時器
}
function flashText() {
var oElem = document.getElementById('my_box');
oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
}
function stopTextColor() {
clearInterval(intervalId); // 清除計時器
}

參考#

Last updated on