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

Question

我试图在x秒后淡入div，但如果点击一个按钮，马上淡入或延迟更早。但是，按钮单击不会覆盖默认值。

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

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

/**** **** UPDATE/ 感谢@Nenad Vracar区我得到这个工作，除了一个错误。如果您等待，弹出式加载。但是如果你点击链接，弹出窗口会加载，但是当你关闭弹出窗口时，它会再次加载。如果用链接打开，它不应该再次加载。

见琴：https://jsfiddle.net/omarel/9d7sua0h/12/

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>

Answer 2

jQuery中的.delay()功能作为一个队列动作，一旦它被称为无法取消。推荐的情况下使用setTimeout要覆盖延迟逻辑来代替：

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

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

您可以检查.delay() documentation的详细信息，这限制和使用情况。

更新

关于对这个问题您的更新，你有正确的想法，但在错误的地方。如果将检查跳过的类移动到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>

Answer 3

我会正确答案下面发表评论，但我没有评论权限。大声笑我想你的评论中说，有一个按钮可以淡出div，但是定时器会在它到期后将其恢复。

还有另一个JavaScript函数调用clearTimeout（）如果按钮被点击

这里可以停止初始计时器的什么，我相信你的工作小提琴所要求的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); 

    }); 
});