Trying to make multiple navigation links move from left to right with a delay for each one, can some-CodePudding

So I was trying to make multiple navigation links move from left to right with a delay for each one, I found a solution after googling, but can someone explain why my original code snippet doesn´t work?

So this is the code snippet that works:

const openNav = document.querySelector(".open-nav");
const navigationLinks = document.querySelectorAll(".navigation-links");

openNav.addEventListener("click", () => {
    for (let i = 0; i < navigationLinks.length; i  ) {
        setTimeout(function () {
            navigationLinks[i].classList.toggle("-translate-x-0");
        }, 100 * i);
    }
});

But this one doesnt:

const openNav = document.querySelector(".open-nav");
const navigationLinks = document.querySelectorAll(".navigation-links");

openNav.addEventListener("click", () => {
    navigationLinks.forEach((element) => {
        setTimeout(function () {
            element.classList.toggle("-translate-x-full");
        }, 1000);
    });
});

Here's the html

    <nav >
        <button >
            <span >
                <span >Move Links</span>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                </svg>
            </span>
        </button>
        <ul >
            <li >
                <a  href="">Link 1</a>
            </li>
            <li >
                <a  href="">Link 2</a>
            </li>
            <li >
                <a  href="">Link 3</a>
            </li>
            <li >
                <a  href="">Link 4</a>
            </li>

            <li >
                <a  href="">Etc</a>
            </li>
        </ul>

And here is a jsbin: https://jsbin.com/sanesozaje/edit?html,css,js,output

Sorry if not explained well, english isn't my first language

CodePudding user response：

It didn't work because of the setTimeout delay.

You looped through all the items and then added a toggle class for each element after 1000ms. In other words. After 1000mx of the function running, each of the items gets the toggle class (which will happen at the same time).

On the other hand, on the working code snippet you see 100 * i for the setTimeout. This mean for the 1st item the timeout will be 100ms, for the 2nd item it will be 200ms, for the 3rd 300ms, ...

So you could fix your original snippet by also adding this missing details to you code, something like:

 openNav.addEventListener("click", () => {
    navigationLinks.forEach((element, i) => {
        setTimeout(function () {
            element.classList.toggle("-translate-x-full");
        }, 100 * i);
    });
 });

on the 2nd line added the , i
added the `* i) for the setTimeout delay.

With these changes your code will also add a different timeout delay for each of the items