按钮点击淡入div，否则在x秒后淡入

Question

我正在尝试延迟x秒后淡入一个div，但如果单击按钮，则立即淡入或缩短延迟时间。然而，按钮点击未覆盖默认设置。

 $(document).ready(function() {             
      $('#thepopupdiv').delay(12000).fadeIn(700);

      $("#skipIntroBTN").click(function() {
           $('#thepopupdiv').fadeIn(700); 
      });
 });

/**** 更新 ****/ 感谢@Nenad Vracar，我得到了这个工作（代码）的实现，但还有一个bug。如果你等待，弹出窗口会加载。但是，如果你点击链接，弹出窗口会加载，但是当你关闭弹出窗口时，它会再次加载。如果通过链接打开，就不应该再次加载。

请参见样例：https://jsfiddle.net/omarel/9d7sua0h/12/

- Omar

---

提供一个Fiddle以便轻松检查代码。 - Ani Menon

Answer 1

在这里，您可以使用setTimeout。

var fade = function() {
  $('div').fadeIn(700);
}
$('button').click(function() {
  fade()
});

setTimeout(fade, 12000);

div {
  height: 50px;
  width: 50px;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLick</button>
<div></div>

- Nenad Vracar

---

我意识到的唯一一件事是在弹出层中有一个X按钮，用于使用fadeOut()关闭弹出层。当关闭弹出层后，它仍然会在12秒后重新弹出。是否有一种方法可以取消超时，以便它不会再次弹出？ - Omar

这是我的代码示例。请注意，当您快速加载并关闭弹出窗口时，它仍然会再次打开。如果您单击以打开它，则不希望再次打开：https://jsfiddle.net/omarel/9d7sua0h/12/ - Omar

Answer 2

jQuery 中的 .delay() 函数作为队列运行，一旦调用就无法取消。在需要覆盖延迟逻辑的情况下，建议使用 setTimeout 代替：

$(document).ready(function() {   
      $("#skipIntroBTN").click(function() {
        $('#thepopupdiv').fadeIn(700); 
      });

      setTimeout(function() {
        $('#thepopupdiv').fadeIn(700);
      }, 12000);
 });

您可以查看.delay()文档以获取有关此限制和用例的更多信息。

更新

关于您在问题上的更新，您想法是正确的，但位置不对。如果您将跳过类的检查移动到fade()函数中，您将能够停止div的重新出现。目前，您在setTimeout调用周围进行了该检查，这将始终通过该跳过类检查（除非您是超级快速的点击者）。尝试下面的更新应该可以解决问题：

 $(document).ready(function() {

   //load popup

   var fade = function() {
     // move the hasClass check into the fade function
     if (!$('#thepopupdiv').hasClass('skipped'))
       $('#thepopupdiv').fadeIn(700);
   }

   $("#skipIntroBTN").click(function() {
     $('#thepopupdiv').fadeIn(700).addClass('skipped');
     fade();
   });

   setTimeout(fade, 5000);

   $(".closeit").click(function() {
     $("#thepopupdiv").fadeOut(0001);
   });

 });

#thepopupdiv {
  width: 100px;
  height: 50px;
  color: #fff;
  background-color: #000;
  display: none;
  padding: 10px;
  margin-bottom: 100px;
}

#thepopupdiv a {
  color: #fff;
}

#skipIntroBTN {
  cursor: pointer;
  width: 100px;
  height: 50px;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skipIntroBTN">
  <a href="#">click here for popup</a>
</div>

<div id="thepopupdiv">
  <a href="#" class="closeit">click to close popup NOW</a>
</div>

- Jonathan Michalik

Answer 3

我本来想在正确答案下面发表评论，但我没有评论权限。哈哈，在您的评论中，我认为您说有一个按钮可以使div淡出，但计时器在过期后又将其带回。

还有另一个名为clearTimeout（）的JavaScript函数，如果单击按钮，则可以停止初始计时器

这里是我认为您要求的工作Fiddle https://jsfiddle.net/81u97ux9/1/

HTML

<div id="thepopupdiv" style="display: none">
    <p>
        This Is a hidden Div
        <button id="fadeOut">
        Fade Out
        </button>
    </p>
</div>
<button id="skipIntroBTN">
    Press me
</button>

JavaScript

$(document).ready(function() {             
  var fade = function() {
    $('#thepopupdiv').fadeIn(700);
  }
  var timer = setTimeout(fade, 10000)
  $("#skipIntroBTN").click(function() {
       fade(); 
       clearTimeout(timer);
  });
  $("#fadeOut").click(function() {
       $('#thepopupdiv').fadeOut(700);

  });
});

- Gank Lanceman