How pause a loop in JavaScript?

Question

Can anyone tell me why I'm not being able to pause the loop? The idea is to pause it for 5 seconds and then restart it. The code is bellow. Thanks!

let pics = [{
        name: 'picture',
        picture: 'https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
        number: 1
    },
    {
        name: 'picture',
        picture: 'https://images.unsplash.com/photo-1495837174058-628aafc7d610?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80',
        number: 2
    },
    {
        name: 'picture',
        picture: 'https://images.unsplash.com/photo-1474314881477-04c4aac40a0e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
        number: 3
    }
];

let pauseLoop = false;

function displayImage() {
    let display = document.querySelector('#display');
    let button = document.querySelectorAll('.pic');

    for (let i = 0; i < button.length; i++) {
        button[i].addEventListener('click', function() {
            display.style.backgroundImage = "url('" + pics[i].picture + "')";

            // THIS IS SUPPOSED TO PAUSE THE LOOP FOR 5 SECONDS AND THEN RESTART THE LOOP
            pauseLoop = true;

            setTimeout(function() {
                pauseLoop = false;
                console.log(pauseLoop)
            }, 5000);
        })
    }
}


// create list inside nav
let createGalleryMeny = () => {
    let nav = document.querySelector('#nav');

    for (let i = 0; i < pics.length; i++) {
        let img = document.createElement('DIV');
        img.style.backgroundImage = "url('" + pics[i].picture + "')";
        img.className = 'pic';
        nav.appendChild(img)
    }
}

// loop through every picture
function loopPics() {
    let number = 0;
    let display = document.querySelector('#display');

    display.style.backgroundImage = "url('" + pics[pics.length - 1].picture + "')";

    if (pauseLoop !== true) {
        setInterval(function() {
            display.style.backgroundImage = "url('" + pics[number].picture + "')";
            number++

            if (number === pics.length) {
                number = 0
            }
        }, 2000)
    }
}


(() => {
    createGalleryMeny();
    loopPics();
    displayImage()
})();

This code is just a simple gallery and I wanna have the option to pause the loop when one clicks any picture in the gallery, display the clicked picture and restart the loop after 5 seconds.

Answer 1

Pause is not something you should want in Javascript, this blocks your whole code. You should create a function that will execute the code you want to repeat after X seconds. It can be a function which can call itself. If you do want to "wait" for a few seconds on a line of code it is possible.

Make the function async:

async function displayImage() {

And then wait for 5 seconds:

await new Promise(resolve => setTimeout(resolve, 5000));

But your code is binding a click in the for loop, and you want to reexecute that code part. Which will result in multiple click handlers on 1 button depending on the timing. Which will probably not result in what you want.