兩個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循環（一個接一個）是否以第二個循環只在第一個循環完成時才同步執行的方式同步執行？

回答

相關問題