Как сделать паузу oop в JavaScript? - PullRequest
Новая
       36

Как сделать паузу oop в JavaScript?

0 голосов
/ 07 апреля 2020

Может кто-нибудь сказать мне, почему я не могу приостановить l oop? Идея состоит в том, чтобы приостановить его на 5 секунд, а затем перезапустить. Код ниже. Спасибо! 

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()
})();

Этот код представляет собой простую галерею, и я хочу иметь возможность приостановить l oop, когда кто-то щелкает по любой картинке в галерее, отображать нажатую картинку и перезапускать l oop через 5 секунд.

1 Ответ

1 голос
/ 07 апреля 2020

Пауза - это не то, что вам нужно в Javascript, это блокирует весь ваш код. Вы должны создать функцию, которая будет выполнять код, который вы хотите повторить через X секунд. Это может быть функция, которая может вызывать сама себя. Если вы хотите «подождать» несколько секунд в строке кода, это возможно.

Сделайте функцию асинхронной c: 

async function displayImage() {

И затем подождите 5 секунд. : 

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

Но ваш код привязывает щелчок в для l oop, и вы хотите повторно выполнить эту часть кода. Что приведет к нескольким обработчикам нажатий на 1 кнопку в зависимости от времени. Что, вероятно, не приведет к тому, что вы хотите.

...