Skip to content

Instantly share code, notes, and snippets.

@secretpray
Created October 26, 2021 10:28
Show Gist options
  • Save secretpray/3eb0fda899159b6f2191a30772fc4929 to your computer and use it in GitHub Desktop.
Save secretpray/3eb0fda899159b6f2191a30772fc4929 to your computer and use it in GitHub Desktop.
// Timer 5 sec -> count = 5000
// stop timer -> running = false
var count = 5000,
running = true,
secondsNode = document.getElementById("seconds"),
millisecondsNode = document.getElementById("milliseconds"),
mOld,
mNew;
function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
secondsNode.innerHTML = Math.floor(count / 1000);
millisecondsNode.innerHTML = count % 1000;
} else {
secondsNode.innerHTML = 0
millisecondsNode.innerHTML = 0
}
}
mOld = new Date().getTime();
draw();
// If need break by key
window.addEventListener("keydown", function(e) {
switch (e.keyCode) {
case 32: // PLAY (Start/Stop)
if (running) {
running = false;
} else {
running = true;
mOld = new Date().getTime();
draw();
}
break;
case 82: // RESET
count = 24000;
secondsNode.innerHTML = 24;
millisecondsNode.innerHTML = 0;
running = false;
}
});
// css
p {
font-family: helvetica;
font-size: 100px;
text-align: center;
}
// html
<p><span id="seconds">24</span> secs and <span id="milliseconds">000</span> milliseconds</p>
@secretpray
Copy link
Author

var count = 24,
intervalMs = 10,
counter = setInterval(timer, intervalMs),
running = true,
msRemaining = 1000;

function timer() {
msRemaining -= intervalMs;
if (msRemaining <= 0)
{
count -= 1;
if (count <= 0) {
clearInterval(counter);
}
msRemaining = 1000;
}

document.getElementById("timer").innerHTML = count + " secs," + msRemaining + " ms";

}

@secretpray
Copy link
Author

// timer
var count = 2500, // 2.5 sec
running = true,
mOld,
mNew;

function draw() {
if (count > 0 && running) {
requestAnimationFrame(draw);
mNew = new Date().getTime();
count = count - mNew + mOld;
count = count >= 0 ? count : 0;
mOld = mNew;
document.getElementById("seconds").innerHTML = Math.floor(count / 1000);
document.getElementById("milliseconds").innerHTML = count % 1000;
} else {
document.getElementById("seconds").innerHTML = 0
document.getElementById("milliseconds").innerHTML = 0
}
}

used:
const intersections = new Map(); // Auutoscroll only after delay
const intersectionChanged = (entry) => {
if (entry.isIntersecting && document.querySelector("a[rel='next']")) {
loader.classList.add("show");
mOld = new Date().getTime();
running = true
count = 2500
draw();
intersections.set(entry.target, setInterval(() => {
loader.classList.remove("show");
running = false
getData()
}, 2500));
} else if (!entry.isIntersecting && intersections.get(entry.target) != null) {
loader.classList.remove("show");
running = false
// console.log('Infinity scroll disabled');
clearInterval(intersections.get(entry.target));
}
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment