javascript - 3 显示div jquery的超时间隔

Question

<div class="popup_div">Form here</div>

我正在做的是让这个“div”在页面加载5秒后弹出，然后当用户关闭弹出div时它会再次计数到15秒再次出现，然后当用户再次关闭它时它将再显示 30 秒

这是间隔

5 secs (on page load)
15 secs
30 secs (final popup, it won't popup after this)

这是我的 fiddle ，希望有帮助

https://jsfiddle.net/3xk725ts/

Answer 1

这里我使用 setTimeout 而不是 setInterval 编写了一个解决方案，因此您无需关心清除它。

    var iteration = 0;
    var times = [5000, 15000, 30000]
    var showPopUp = function(time) {
        setTimeout(function() { 
        $('#timer').show();
        $('#timer').html("<span class='close'>X</span><h3>Count down complete</h3>"); }, time)
    }

    showPopUp(times[iteration]);

    $('body').on('click', '.close', function() {
        $('#timer').hide();
        iteration +=1;
        if (iteration < 3) {
          showPopUp(times[iteration])
        }
    });