Javascript 两个for循环（一个接一个）是否同步执行，第二个循环仅在第一个循环完成时启动？

我的项目中有一个场景，我必须有两个for循环，一个接一个：

for (var i = this.props.activeChannel.channelsArr.length - 1; i > -1; i--) {
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).find("img").attr("src", "http://localhost:3003/images/menu-icons/" + $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).find("img").attr("src").getTheImgNameFromUrl().replace("-grey", "") + ".png");
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).addClass("dummyActive");
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).removeAttr("style").css({
    "background-color": "#96A2B3"
  });
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).removeClass("dummyNotActive");
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase() + " a");
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase() + " div").removeClass().addClass("channel-activation-btn").removeAttr('style');
  //$("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()+" a").css({"display":"block"});
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).insertBefore("#" + $("#content li:nth-child(1)").attr("id"));
}

for (var i = this.props.activeChannel.channelsArr2.length - 1; i > -1; i--) {
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).removeClass("dummyActive").addClass("dummyNotActive");
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).removeAttr("style").css({
    "background-color": "#E5E8EC"
  });
  // $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()+" div").removeClass("channel-activation-btn");
  // $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()+" div").removeClass().removeAttr( 'style' ).css({"width":"100%","height":"100%"});
  //$("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).insertBefore("#" + $("#inactiveContainer li:nth-child(1)").attr("id"));
  $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()).appendTo("#inactiveContainer");
}

---

正如您所看到的，有两个for循环，在每个for循环中有两行代码，它们在不同的位置操作css和insert元素，其中没有异步调用（Ajax）。我需要知道的是上面的循环将按顺序执行？对我来说，第一个循环完成并执行其中的所有行是非常重要的，然后第二个for循环开始执行。那么，我可以说100%确定第二个循环将在第一个循环完成后执行吗？

是的。调用的函数都不包含任何异步方面。在调用第二个循环之前，第一个循环的所有影响都将得到解决。

几乎所有JavaScript代码都是逐行同步运行的

除非使用显式异步构造，如

setTimeout

、

setInterval

、事件侦听器、承诺或生成器，否则for循环将一个接一个地执行

//这将首先运行
对于（变量i=0；i<10；i++）{
log（'第一个循环：'，i）
}
//这是第二次
对于（变量i=0；i<10；i++）{
log（'第二个循环：'，i）
}

---

.as控制台包装{min height:100vh；}

Javascript有一些异步概念，如：

• 超时
• 回调
• 事件侦听器
• 发电机功能（ES2015）
• 许诺

• async

  函数（ES7）

您从其他语言知道的所有“公共”元素都是同步处理的

为了完整起见，我重构了您的代码：

for（var i=this.props.activeChannel.channelsArr.length-1；i>-1；i--）{
//定义元素一次
让$element=$（“#”+this.props.activeChannel.channelsArr[i].channelName.replace（//g，'-'）.toLowerCase（））；
//不要通过内联方式来增加可读性
让newSrc=”http://localhost:3003/images/menu-icons/“+$element.find（“img”）.attr（“src”）.getTheImgNameFromUrl（）.replace（“-grey”，”）+“.png”；
//然后用它，把所有的电话链接起来
$element.find（“img”）.attr（“src”，newSrc）；
$element.addClass（“dummyActive”）
.removeAttr（“风格”）
.css（{“背景色”：“#96A2B3”}）
.removeClass（“dummyNotActive”）；
//……等等
}

为什么会认为它们不是同步执行的？循环是同步执行的。但是，页面呈现将在所有JS执行完毕后完成，因此您无法在第一个循环中看到对类名所做的更改，当第二个循环将反转更改时。@ScottHunter我搜索了它，注意到for循环是同步的，但我只是想确定我的理解，因为我在异步执行方面遇到了很多问题，我需要确定about@Teemu谢谢你回答我的问题，这些代码只是我正在尝试的一个例子要在循环中执行，将进行更改。所以我可以说第二个循环行总是在第一个循环之后执行，并且？（你能再解释一下）我不知道还能说些什么，也许可以查一下