如何实现循环内同步执行代码并间隔3秒，完成后触发onInflate？

我明白你想要的效果：在onCreate函数里循环执行iframe的初始化操作，每次循环间隔3秒，等所有循环都完成后，再执行onInflate函数。你之前尝试的两段代码没生效，主要是没处理好异步循环的逻辑，我来帮你梳理下问题，再给出可行的方案。

先说说你之前代码的问题 #

• 第一段代码：普通的for循环是同步执行的，所有的scene.set和attr操作会瞬间跑完，然后你直接调用了deferred.resolve，完全没有加入等待逻辑，所以done回调会立刻触发，根本等不到3秒间隔。
• 第二段代码：手动嵌套setTimeout的逻辑混乱，不仅只处理了两次循环，还在最外层提前调用了deferred.resolve，导致Promise直接进入完成状态，后面的异步操作完全不会影响结果，自然达不到你要的效果。

可行解决方案 #

方案1：用Async/Await（推荐，代码更简洁）

先封装一个等待函数，把setTimeout转换成Promise：

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

然后把onCreate改成异步函数，用await实现循环等待：

var onCreate = async function() {
  for(let i = 0; i < TOTAL_FRAME; i++){ 
    // 执行当前循环的任务
    scene.set(i, {iFrame : "#iviFrame" + (i+1)} ); 
    $(scene.get(i).iFrame).attr("src", buffer.get(i).url); 
    // 等待3秒后再进入下一次循环
    await wait(3000);
  }
}

调用的时候用then或者直接await（如果在异步环境里）：

onCreate().then(() => {
  onInflate();
  console.log("XXX2");
});

方案2：用递归+jQuery Deferred（兼容旧环境）

如果你的环境不支持ES6的Async/Await，可以用递归的方式处理循环，结合Deferred来控制流程：

var onCreate = function() {
  var deferred = new $.Deferred();
  let currentIndex = 0;

  // 定义递归处理函数
  function processFrame() {
    // 循环结束条件：所有frame都处理完
    if (currentIndex >= TOTAL_FRAME) {
      deferred.resolve("done");
      return;
    }

    // 执行当前frame的初始化
    scene.set(currentIndex, {iFrame : "#iviFrame" + (currentIndex + 1)} ); 
    $(scene.get(currentIndex).iFrame).attr("src", buffer.get(currentIndex).url); 

    currentIndex++;
    // 3秒后处理下一个frame
    setTimeout(processFrame, 3000);
  }

  // 启动递归循环
  processFrame();
  return deferred.promise();
}

调用方式和你之前的一样：

onCreate().done(function(){ 
  onInflate(); 
  console.log("XXX2"); 
});

这两个方案都能实现你要的流程：先在onCreate里按3秒间隔逐个处理iframe，等所有循环完成后，再执行onInflate。

内容的提问来源于stack exchange，提问作者Yohanes AI