我在 5 秒后使用setInterval. 我想將秒數增加上一個間隔值。
假設頁面加載并且模態在 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>
如何實作上述條件？
uj5u.com熱心網友回復：
我認為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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475380.html
標籤：jQuery
上一篇：使用ajax訪問模板的php變數