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

-2

我在我的项目的情况，我必须有两个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循环和内部的每个有其操纵几行CSS和将元素插入不同的位置，并且不存在Asynch调用（Ajax）。我需要知道的是上面的for循环将按顺序执行？对我来说非常重要的是，第一个循环完成其中的所有行，然后第二个for循环开始执行。所以我可以说100％确定第一个循环完成后第二个循环会执行吗？

来源

2017-03-15 Hamed Minaee

为什么会认为它们不是同步执行的？ –

循环被同步执行。但是，页面渲染将在所有JS执行完毕后完成，因此当第二个循环将反转更改时，您无法看到第一个循环中对类名称所做的更改。 – Teemu

@ScottHunter我搜索了它，我注意到for循环是同步的，但我只是想确保我的理解，因为我有很多异步执行的问题，我需要确保 –

JavaScript有几个异步的概念，如：

超时
回调
事件侦听器
发生器功能（ES2015）
承诺
async功能（ES7）

所有 “常用” 你知道从其他语言的要素是同步处理。

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

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 
 

 
}

我希望你得到的要点。

来源

2017-03-15 19:31:34 Christoph

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

来源

2017-03-15 19:30:13 user5090812

几乎所有的JavaScript代码都是一行一行地同步运行的。除非使用显式异步构造，如setTimeout,setInterval，事件监听器，Promises或生成器，否则您可以放心，您的for-loops将一个接一个地执行。

// 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) 
 
}

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

来源

2017-03-15 19:30:22 gyre

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

回答

相关问题