如何在JavaScript中暂停循环？

谁能告诉我为什么我不能暂停循环？方法是暂停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()
})();

let pics=[{
名称：'图片'，
图片：'https://images.unsplash.com/photo-1491555103944-7c647fd857e6?ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=1050&q=80'，
编号：1
},
{
名称：'图片'，
图片：'https://images.unsplash.com/photo-1495837174058-628aafc7d610?ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=1950&q=80'，
编号：2
},
{
名称：'图片'，
图片：'https://images.unsplash.com/photo-1474314881477-04c4aac40a0e?ixlib=rb-1.2.1&auto=格式&fit=裁剪&w=1050&q=80'，
电话：3
}
];
设pauseLoop=false；
函数displayImage（）{
let display=document.querySelector（“#display”）；
let button=document.queryselectoral（'.pic'）；
for（设i=0；i{
让nav=document.querySelector（“#nav”）；
for（设i=0；i {
createGalleryMeny（）；
loopPics（）；
displayImage（）
})();

---

这段代码只是一个简单的图库，我想在单击图库中的任何图片时，可以选择暂停循环，显示单击的图片，并在5秒钟后重新启动循环。

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

使函数异步：

async function displayImage() {

然后等待5秒钟：

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

---

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

有人能告诉我为什么不能暂停循环吗？因为循环不能暂停

setTimeout（）

是一种异步操作，与循环同时工作。回调函数仅在以下情况下运行：a）指定的时间已过，b）JavaScript运行时处于空闲状态，这意味着当前函数（及其循环）已完成。@ScottMarcus请参阅我的文章，这是可能的，但可能不是最好的solution@Niels好吧，可以编写造成延迟的代码，但从技术上来说，不能暂停循环。