在每 5 秒显示 20 秒后如何关闭此元素

Question

我有一个虚假的销售通知，每 20 秒显示一个新弹出窗口，问题是，通知会显示整整 20 秒，直到出现一个新通知，它也保持可见 20 秒。

我只需要显示它们 5 秒(但在 20 秒后仍然显示新通知(。我该怎么做？

这是我当前的jquery代码：

setInterval(function(){
random = Math.floor( Math.random() * len ) ;
tpj(".custom-social-proof").hide('slow');
tpj(".custom-social-proof").eq(random).stop().slideToggle('slow');
}, 20000);

我尝试为.hide函数添加另一个间隔，如下所示：

setInterval(function(){
random = Math.floor( Math.random() * len ) ;
tpj(".custom-social-proof").eq(random).stop().slideToggle('slow');
setInterval(function(){
tpj(".custom-social-proof").hide('slow');
}, 5000);
}, 20000);

但奇怪的是，这第一次有效，但又过了 20 秒，每个弹出窗口都会在不到一秒的时间内消失，而不是 5 秒。为什么？

Answer 1

您已使用 setInterval 隐藏弹出窗口，这意味着您每 5 秒调用一次该函数，因此它将与 20 秒间隔冲突。请改用setTimeout

setInterval(function(){
random = Math.floor( Math.random() * len ) ;
tpj(".custom-social-proof").eq(random).stop().slideToggle('slow');
setTimeout(function(){
tpj(".custom-social-proof").hide('slow');
}, 5000);
}, 20000);

Answer 2

而不是使用另一个setInterval，你应该将回调作为第二个参数传递给.hide或.show，以帮助检测动画何时完成，以便您可以显示/隐藏。

这是一个与您的代码足够接近的示例，因为有一些缺失的部分是使您的代码完全工作所必需的。

.HTML：

<div>
<p class="custom-social-proof" style="display:none">
Purchase Alert
</p>
</div> 

JavaScript

setInterval(function(){
$(".custom-social-proof").show(2000, function() {
$(".custom-social-proof").slideToggle(3000);
});
}, 20000);

你可以阅读jQuery api文档。JQuery hide