jQuery setInterval为5秒，增量为前一个间隔

Question

我使用setInterval显示5秒后的jQuery模态。我想将秒数增加到之前的间隔值

让我们假设页面加载并且模态在5秒后出现，下一次模态应该在10秒后出现(间隔增加到之前的值5+5)，然后是20秒，然后是40秒，以此类推…

我有以下代码，但只发射每5固定秒:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script>
$(document).ready(function() {
setInterval(function() {
$('#ex1').modal();
}, 5000);
});
</script>
<style>
.modal {
max-width: 70% !important;
}
</style>
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<a href="https://example.com">
<img alt="image" src="https://example.com/image.png" />
</a>
</div>

如何实现上述条件?

Answer 1

我认为setInterval()不是正确的工具。我会用setTimeout()，用一个事件，当模态关闭时触发和一个全局计数器，每次关闭前一个模态，它的值都会翻倍。

let counter = 5000;
function repeatTimeout(ms) {
console.log('counter is: ' + ms);
return setTimeout(function() {
$('#ex1').modal();
counter *= 2;
}, ms);
}
$(document).ready(function() {
let timer = repeatTimeout(counter);
$('#ex1').on($.modal.AFTER_CLOSE, function() {
console.clear();
console.log('closed modal');
clearTimeout(timer);
timer = repeatTimeout(counter);
})
});

.modal {
max-width: 70% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<div id="ex1" class="modal">
<a href="https://example.com">
<img alt="image" src="https://example.com/image.png" />
</a>
</div>