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，以帮助检测动画何时完成，以便您可以显示/隐藏。 / p>

这里是您的代码足够接近的示例，因为有一些缺少的部分可以使您的代码完全正常工作。

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

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

2 个答案: