By Ondrej Polesny In JavaScript, a debounce function makes sure that your code is only triggered once per user input. Search box suggestions, text-field auto-saves, and eliminating double-button clicks are all use cases for debounce.  In this tutoria...

Debounce – How to Delay a Function in JavaScript (JS ES6 Example)

https://www.freecodecamp.org/news/javascript-debounce-example/

The following is a guest post by David Corbacho, a front end engineer in London. We've broached this topic before, but this time, David is going to drive the

Debouncing And Throttling Explained Through Examples | CSS-Tricks

https://css-tricks.com/debouncing-throttling-explained-examples/

WIP dark mode spotlight hover interaction for the table of contents on my blog. Any improvements?

You're teaching me something new! Wow. Thanks. Found this quick write up giving me a bit more context. https://www.freecodecamp.org/news/javascript-debounce-example/ Thanks Amin!

Yeah! Good feedback. I'm on the fence with that idea due to the user being contextually aware otherwise (not shown is the blog article with corresponding active heading). On the blog, just by scrolling the toc updates state to reflect the active item. Still necessary?

Denounce the hover for about 40 milliseconds to really know if the user _is_ hovering or not then change colour. Decreases distractions. Learnt when noodling with notion’s ui.

Thanks for the feedback! Just so I understand, you’re saying to add a delay of 40 ms after mouse enter, in order to make the effect feel more intentional?

A delay will only delay it :/ A debounce will prevent the hover-color to change unless its being hovered for more than X ms. Just something I noticed when when looking at notion :D I managed to do this via javascript but couldn't find any pure css way to do it.

:D

Another great article if you like reading more on this stuff. PS: it also explains throttling (same same but different)
https://css-tricks.com/debouncing-throttling-explained-examples/

Maybe an indicator to show the user what section they're already at (while the user is hovering over other options)?

Posts