Skip to content

Instantly share code, notes, and snippets.

@acip

acip/animate.html

Created November 21, 2019 18:39
Show Gist options
  • Save acip/96902e7d1df2c84964087972b1f49e3c to your computer and use it in GitHub Desktop.
Save acip/96902e7d1df2c84964087972b1f49e3c to your computer and use it in GitHub Desktop.
Download ZIP
setTimeout vs requestAnimationFrame
Raw
animate.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<img id="stimImg" style="position:absolute; top:100px; left:100px; display:none" width="300" height="300" src="data:image/png;base64,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"/>
<div id="stimText" style="position:absolute; top:100px; left:100px; display:none" >word stim</div>
<script>
class StimRenderer {
constructor(stimId, presTime, isi) {
this.stim = document.getElementById(stimId);
this.presTime = presTime;
this.isi = isi;
}
show() {
this.setVisibility('block');
}
hide() {
this.setVisibility('none');
}
setVisibility(visibility) {
this.stim.style.display = visibility;
}
renderWithTimeout() {
let toggler = 'show';
const toggle = () => {
let timer;
this[toggler]();
if (toggler === 'show') {
toggler = 'hide';
timer = this.presTime;
} else {
toggler = 'show';
timer = this.isi;
}
setTimeout(toggle, timer);
};
toggle();
}
renderWithRequestAnimationFrame() {
let lastRender = 0;
let toggler = 'hide';
const toggle = (timestamp) => {
const stateInterval = toggler === 'show' ? this.presTime : this.isi;
const sinceLastRender = timestamp - lastRender;
if (sinceLastRender >= stateInterval) {
// need to change state
toggler = toggler === 'show' ? 'hide' : 'show';
this[toggler]();
lastRender = timestamp;
}
window.requestAnimationFrame(toggle);
};
window.requestAnimationFrame(toggle);
}
}
const urlParams = new URLSearchParams(window.location.search);
const presTime = parseInt(urlParams.get('presTime')) || 5000;
const isi = parseInt(urlParams.get('isi')) || 1000;
const stimId = parseInt(urlParams.get('text')) ? 'stimText' : 'stimImg';
const renderMode = parseInt(urlParams.get('timeout')) ? 'renderWithTimeout' : 'renderWithRequestAnimationFrame';
console.log({presTime, isi, stimId, renderMode});
const renderer = new StimRenderer(stimId, presTime, isi);
renderer[renderMode]();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment