(Fixed) Lags When Scrolling on a page with TOC and large number of he… #148
Conversation
…adings Fixes #147 Type of change: Code Update, calling the `update()` method in `doxygen-awesome-interactive-toc.js` by throttling every 100ms instead of calling it every time the screen is scrolled.
doxygen-awesome-interactive-toc.js
Outdated
| document.getElementById("doc-content")?.addEventListener("scroll", () => { | ||
| DoxygenAwesomeInteractiveToc.update() | ||
| }) | ||
| document.getElementById("doc-content")?.addEventListener("scroll",throttle(DoxygenAwesomeInteractiveToc.update, 100)) |
There was a problem hiding this comment.
The "this" keyword is missing before the throttle method. Without this, the fix does not work and causes errors in the console.
There was a problem hiding this comment.
Updated the code, please review and let me know if it works now.
Used "this" keyword before throttle.
Glad to know! Thanks! |
|
@jothepro ready for review |
|
Thank you for your contribution, @iamAyushChamoli! I can confirm that this greatly reduces the amount of calls to the update function! I am hesitant to merge this as is though, because it comes with the risk of "swallowing" events at the end of a scroll. For example, if you try scrolling really fast, for example by dragging the scrollbar all the way to the bottom of the page fast enough, the status of the TOC might not be updated correctly: missing_scroll_events.movI don't think this is a major dealbreaker, because you need to scroll really fast to trigger the behavior, but I'd like to figure out if this can be avoided nevertheless. |
|
@jothepro if I may suggest some fixes, Alternatively, how about batching the changes that occur during the scroll event and making the classname changes in the end? |
|
Sure, I am open for suggestions, I am unsure on how this could best be fixed atm! My hot take would be to delay the execution of the updates: static throttle(func, delay) {
let lastCall = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastCall < delay) {
return;
}
lastCall = now;
return setTimeout(() => {func(...args)}, delay);
};
}It makes the TOC updates lag by 100ms, but I don't think anybody would notice. What you think about that solution? |
|
@jothepro Sure, I think this solution might work since we are already talking about edge case scenarios like scrolling really fast so it is very less likely that this problem will be reproduced frequently. However, if it does, the proposed solution might be a good fix at a negligible cost of TOC update by 100ms. Have you tried testing it out? If you have, can you attach a screen recording so that I can see it for myself if it is noticeable or not? (not sure, but I think you have tried coupling throttling with debouncing in this version? Anyways, if it works, it can be a good addition) |
|
@jothepro @iamAyushChamoli Yes, fix work. I think this behavior is enough for normal work. output.compress-video-online.com.mp4 |
Updated the throttle function with jothepro's solution.
doxygen-awesome-interactive-toc.js
Outdated
| let lastCall = 0; | ||
| return function (...args) { | ||
| const now = new Date().getTime(); | ||
| if (now - lastCall < delay) { | ||
| return; | ||
| } | ||
| lastCall = now; | ||
| return func(...args); | ||
| }; | ||
| } |
There was a problem hiding this comment.
The indentation seems a little bit off.
| let lastCall = 0; | |
| return function (...args) { | |
| const now = new Date().getTime(); | |
| if (now - lastCall < delay) { | |
| return; | |
| } | |
| lastCall = now; | |
| return func(...args); | |
| }; | |
| } | |
| let lastCall = 0; | |
| return function (...args) { | |
| const now = new Date().getTime(); | |
| if (now - lastCall < delay) { | |
| return; | |
| } | |
| lastCall = now; | |
| return func(...args); | |
| }; | |
| } |
Fixes #147
Type of change:
Code Update, calling the
update()method indoxygen-awesome-interactive-toc.jsby throttling every 100ms instead of calling it every time the screen is scrolled.