jQuery 将间隔设置为 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()，当模式关闭时触发 event 和 全局计数器 每次关闭前一个模态时它的值都会翻倍。

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>

jQuery 将间隔设置为 5 秒并按之前的间隔递增

jQuery setInterval by 5 seconds and Increment by previous interval

jquery