如何在JavaScript中暂停循环？

Question

有人可以告诉我为什么我无法暂停循环吗？想法是将其暂停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()
})();

此代码只是一个简单的图库，当一个人点击图库中的任何图片时，我想选择暂停循环，显示所单击的图片，并在5秒钟后重新开始循环。

Answer 1

暂停不是您应该在Javascript中想要的东西，这会阻塞您的整个代码。您应该创建一个函数，该函数将在X秒后执行您想要重复的代码。它可以是一个可以自我调用的函数。如果您确实想在一行代码上“等待”几秒钟，则可以。

使功能异步：

async function displayImage() {

然后等待5秒钟：

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

但是您的代码绑定了for循环中的一个单击，您想重新执行该代码部分。这将导致1个按钮上的多个单击处理程序，具体取决于时间。这可能不会导致您想要的结果。