setInterval 时间没有得到正确的值

Question

我有两个数组。一个文件和另一个我想在 iframe 中显示它们的时间。我遍历它们，文件显示正确，但时间始终设置为第一个元素。

iframe 总是加载 10000 毫秒。

$(function() {

  var urls = ['/uploads/presentations/1560837902.pdf', '/uploads/presentations/1560837925.mp4', '/uploads/presentations/1560837959.jpg', '/uploads/presentations/1560838138.docx', '/uploads/presentations/1560838215.ppt'];

  var time = [10000, 40000, 10000, 20000, 10000];

  var i = 0;

  function loadIframe(url) {

    $('#iframe').attr('src', url);

  }

  setInterval(function() {

    // update the index

    i = (i + 1) % urls.length;

    loadIframe(urls[i]);

  }, time[i]);

  loadIframe(urls[i]);

});