sam/goalsbreakdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use requestAnimationFrame to defer in-focus and handler binding

Browse Source 
requestAnimationFrame waits until after the browser has rendered the
current frame, which includes processing the async scroll event queued
by scrollToTask. This ensures in-focus is set after the scroll event
fires, not overwritten by it.
This commit is contained in:
Yuyao Huang 2026-05-09 16:04:08 +08:00
parent ab000bcd41
commit 5294446407
1 changed files with 13 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/js/tasks.js
View File

@ -69,7 +69,9 @@ async function loadTasks() {
}
}
// Directly set in-focus on the scrolled task instead of recalculating
// Wait one frame so the async scroll event from scrollToTask fires first,
// then set in-focus and bind handlers after it has been consumed.
requestAnimationFrame(() => {
if (focusTaskId) {
document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`);
@ -77,8 +79,8 @@ async function loadTasks() {
focusEl.classList.add("in-focus");
}
}
initScrollFocus();
});
} catch (error) {
console.error("Failed to load tasks:", error);
}
@ -170,12 +172,8 @@ function initScrollFocus() {
scrollView.removeEventListener("scroll", handleScrollFocus);
scrollView.removeEventListener("scroll", handleScrollSave);
// Delay binding to skip the async scroll event queued by scrollToTask
setTimeout(() => {
scrollView.addEventListener("scroll", handleScrollFocus);
scrollView.addEventListener("scroll", handleScrollSave);
}, 0);
}
function handleScrollFocus() {