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

28
static/js/tasks.js
View File

@ -69,16 +69,18 @@ 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,
if (focusTaskId) { // then set in-focus and bind handlers after it has been consumed.
document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus")); requestAnimationFrame(() => {
const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`); if (focusTaskId) {
if (focusEl) { document.querySelectorAll(".task-item.in-focus").forEach(el => el.classList.remove("in-focus"));
focusEl.classList.add("in-focus"); const focusEl = document.querySelector(`[data-task-id="${focusTaskId}"]`);
if (focusEl) {
focusEl.classList.add("in-focus");
}
} }
} initScrollFocus();
});
initScrollFocus();
} catch (error) { } catch (error) {
console.error("Failed to load tasks:", error); console.error("Failed to load tasks:", error);
} }
@ -170,12 +172,8 @@ function initScrollFocus() {
scrollView.removeEventListener("scroll", handleScrollFocus); scrollView.removeEventListener("scroll", handleScrollFocus);
scrollView.removeEventListener("scroll", handleScrollSave); scrollView.removeEventListener("scroll", handleScrollSave);
scrollView.addEventListener("scroll", handleScrollFocus);
// Delay binding to skip the async scroll event queued by scrollToTask scrollView.addEventListener("scroll", handleScrollSave);
setTimeout(() => {
scrollView.addEventListener("scroll", handleScrollFocus);
scrollView.addEventListener("scroll", handleScrollSave);
}, 0);
} }
function handleScrollFocus() { function handleScrollFocus() {