Javascript 循环浏览图像列表，并随机显示一个以进行短暂闪烁

我有以下html结构：

<ul class="posts">
    <li><img src="https://64.media.tumblr.com/1ff0b6435eaf4f2179e06cfbd9fca583/8fb2fa7b9e4b2d56-1f/s1280x1920/e1a986dea1f99a0cd9dcc7e672bb4a76254df4c4.jpg" class="hidden"></li>
    <li><img src="https://64.media.tumblr.com/70ec82e83c3c5835b10aec4927e253b8/8fb2fa7b9e4b2d56-d0/s540x810/c51483723f355f77a3ae6a17fe19da6525662b46.jpg" class="hidden"></li>
    <li><img src="https://64.media.tumblr.com/7d2f63f029ba23c1e4a6fe28fd6f52d7/8fb2fa7b9e4b2d56-80/s540x810/e6465ab8578c263f62075a2740b763822cbec270.jpg" class="hidden"></li>
    ...
</ul>

这是我的JS/jQuery：

const blockClass = 'block';
const hiddenClass = 'hidden';

function setRandomImage() {
    const randomIndex = (parseInt(Math.random() * $('.posts li').length));
    $('.posts img').removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class from all elems. 
    sleep(2000);
    $(`.posts li:eq(${randomIndex}) img`).addClass(blockClass); // add block class to random item. 
    sleep(4000);
    $(`.posts li:eq(${randomIndex}) img`).removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class to random item
    sleep(3000); // testing sleep function for 3s
}

setInterval(function () {
    setRandomImage();
}, 2000);

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}

const blockClass='block'；
const hiddenClass='hidden'；
函数setRandomImage（）{
常量randomIndex=（parseInt（Math.random（）*$（'.posts li'）.length））；
$（'.posts img'）.removeClass（blockClass）.addClass（hiddenClass）；//从所有元素中删除块类并添加隐藏类。
睡眠（2000年）；
$（`.posts li:eq（${randomIndex}）img`）.addClass（blockClass）；//将块类添加到随机项。
睡眠（4000）；
$（`.posts li:eq（${randomIndex}）img`）.removeClass（blockClass）.addClass（hiddenClass）；//删除块类并将隐藏类添加到随机项
sleep（3000）；//测试3s的睡眠功能
}
setInterval（函数（）{
setRandomImage（）；
}, 2000);
函数睡眠（毫秒）{
const date=date.now（）；
让currentDate=null；
做{
currentDate=Date.now（）；
}while（currentDate-日期<毫秒）；
}

其概念是默认隐藏所有图像。从图像数组中选择一个随机索引，将

显示块

类添加到其中，然后暂停一段时间（我希望图像快速闪烁），然后应该再次隐藏它

应使用睡眠功能实现暂停。如果我只是添加一些控制台日志和不同的睡眠间隔，那么这似乎是可行的，日志直到间隔之后才会出现

此外，如果我调试js，我实际上可以看到图像属性设置正确。但一旦它在浏览器中运行，这些项目就永远不可见。我不确定这是性能问题还是jQuerys的一些怪癖。我只想让它们像频闪效应一样闪烁，但我已经尝试用睡眠功能设置更长的持续时间，看看这是否有任何效果

编辑

如果这与性能有关，我想知道一种更好的实现方法，但据我所知，它应该是相当低的级别

---

你的

睡眠功能是浏览器杀手

它将所有的JS执行都保持在一个while循环中几秒钟（这是很长的一段时间），重复执行，从而完全阻止了所有的JS执行。因此，如果网站上有一个按钮，单击事件将不会响应。事实上，什么都不会。简言之，这是一个可怕的想法

要达到您想要的效果，只需设置一个间隔来触发CSS动画，以获得短暂的闪光效果

以下是您所需要的：


函数setRandomImage（）{
const randomIndex=parseInt（Math.random（）*$（“.posts li”）.length）；
//从所有元素中删除块类。
$（“.posts img”）.removeClass（“块”）；
//将块类添加到随机项。
$（`.posts li:eq（${randomIndex}）img`）.addClass（“块”）；
}
//9秒的间隔
setInterval（函数（）{
setRandomImage（）；
}, 9000);
setRandomImage（）
.posts img{
宽度：100%；
位置：绝对位置；
显示：无；/*默认隐藏在此处*/
}
.街区{
显示：块！重要；
不透明度：0；
动画：flashImg 2s；/*这是“flash”持续时间*/
}
@关键帧flashImg{/*这就是flash动画*/
0%{不透明度：0；}
10%{opacity:1；}/*利用百分比来抑制幻影*/
90%{不透明度：1；}
100%{不透明度：0；}
}
李{
列表样式：无；/*删除li项目符号*/
}






const blockClass = 'block';
const hiddenClass = 'hidden';

function setRandomImage() {
    const randomIndex = (parseInt(Math.random() * $('.posts li').length));
    $('.posts img').removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class from all elems. 
    sleep(2000);
    $(`.posts li:eq(${randomIndex}) img`).addClass(blockClass); // add block class to random item. 
    sleep(4000);
    $(`.posts li:eq(${randomIndex}) img`).removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class to random item
    sleep(3000); // testing sleep function for 3s
}

setInterval(function () {
    setRandomImage();
}, 2000);

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}