我正在使用 setInterval 5 秒后显示 jQuery 模态。我想将秒数增加上一个间隔 value。
假设页面加载并且模态在 5 秒后出现，下一次模态应该在 10 秒后出现（间隔增加前 value 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>如何实现上述条件？
回答1
我认为 setInterval() 不是正确的工具。我会选择 setTimeout()，在模式关闭时触发一个 https://github.com/kylefox/jquery-modal，并且每次关闭前一个模式时都会将其 value 加倍的全局计数器。
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>