Skip to content

Instantly share code, notes, and snippets.

@doubleedesign
Created December 9, 2018 09:16
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save doubleedesign/08f89ad1c4f0ba73ffdbc727136da190 to your computer and use it in GitHub Desktop.
Save doubleedesign/08f89ad1c4f0ba73ffdbc727136da190 to your computer and use it in GitHub Desktop.
How to delay a JavaScript event within an event listener
function myDelayedThing() {
var mySelectors = document.querySelectorAll('.something');
// Loop through mySelectors
for(var i = 0; i < menuLinks.length; i++) {
// Add 'open' class on mouseover
menuLinks[i].addEventListener('mouseover', function() {
this.classList.add('open');
});
// Remove 'open" class with a delay
menuLinks[i].addEventListener('mouseout', function () {
var node = this; // Allows us to access 'this' within the timeout function
setTimeout(function() {
node.classList.remove('open');
}, 500)
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment