Question

我的项目中有一个场景，我必须有两个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循环，每个循环内部都有几行操作css和insert元素在不同的位置，并且它们中没有Asynch调用（Ajax）。我需要知道的是上面的for循环会按顺序执行吗？对我来说非常重要的是，第一个循环完成，其中所有行都被执行，然后第二个for循环开始执行。那么我可以说100％确定在第一个循环结束后第二个循环会执行吗？

Answer 1

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

Answer 2

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

除非你使用像setTimeout，setInterval，事件监听器，Promises或生成器这样的显式异步构造，否则你可以放心，你的for循环将一个接一个地执行。

＆＃13;

// This runs first
for (var i = 0; i < 10; i++) {
  console.log('First loop: ', i)
}

// This runs second
for (var i = 0; i < 10; i++) {
  console.log('Second loop: ', i)
}

＆＃13;

.as-console-wrapper { min-height: 100vh; }

＆＃13;

Answer 3

Javascript有一些异步概念，如：

超时
回调
事件监听器
发电机功能（ES2015）
许
for (var i = this.props.activeChannel.channelsArr.length - 1; i > -1; i--) { // define the element once let $element = $("#" + this.props.activeChannel.channelsArr[i].channelName.replace(/ /g, '-').toLowerCase()); // don't do this inline to increase readability let newSrc = "http://localhost:3003/images/menu-icons/" + $element.find("img").attr("src").getTheImgNameFromUrl().replace("-grey", "") + ".png"; // and then just work with it, chaining all the calls $element.find("img").attr("src", newSrc); $element.addClass("dummyActive") .removeAttr("style") .css({"background-color":"#96A2B3"}) .removeClass("dummyNotActive"); // ... and so on }个函数（ES7）

您从其他语言中了解的所有“常用”元素都是同步处理的。

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

{{1}}

我希望你明白这一点。

两个for循环（一个接一个）是否以第二个循环仅在第一个循环完成时开始的方式同步执行？

3 个答案: