如何在 JavaScript 中暂停循环？答案

【问题标题】：How pause a loop in JavaScript?如何在 JavaScript 中暂停循环？
【发布时间】：2020-04-07 18:08:23
【问题描述】：

谁能告诉我为什么我不能暂停循环？这个想法是暂停它 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 秒后重新启动循环。

【问题讨论】：

谁能告诉我为什么我不能暂停循环？因为循环不能暂停？ setTimeout() 是一个异步操作，与循环同时工作。回调函数仅在 a) 指定的时间量已经过去 b) JavaScript 运行时空闲时运行，这意味着当前函数（及其循环）已完成。
@ScottMarcus 看我的帖子，有可能，但这可能不是最好的解决方案
@Niels 好吧，可以编写产生延迟的代码，但从技术上讲，您不能暂停循环。

标签： javascript loops settimeout pause

【解决方案1】：

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

使函数异步：

async function displayImage() {

然后等待5秒：

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

但是您的代码在 for 循环中绑定了一次单击，并且您想重新执行该代码部分。根据时间，这将导致 1 个按钮上的多个单击处理程序。这可能不会产生你想要的结果。

【讨论】：