JQuery 无效或意外令牌并等待循环首先完成

Question

代码：

for (var i = 0; i < 24; i++) {
   var block;
   if(i < 16) block = `<div class="wrapper"><div class="gap" id="imem_ingess${i}"></div><div class="container"><div class='title'>IMEM ingress ${i} Graph</div><div class="description">hey1</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_ingess${i}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_ingess${i}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;
   else block = `<div class="wrapper"><div class="gap" id="imem_egess${i-16}"></div><div class="container"><div class='title'>IMEM egress ${i-16} Graph</div><div class="description">hey2</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_egess${i-16}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_egess${i-16}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_egess${i-16}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_egess${i-16}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;

   $('#imem_statistics_page').append(block);​
}

---

问题：

1) 此代码无法编译，并引发语法错误。
2) 我想等待循环完成，然后再执行剩余的代码。

提前致谢！

Answer 1

首先，您有一个额外的u200b character。其次，你可以使用setTimeout函数。

setTimeout(function(){
// doing async stuff
}, 1000);

Answer 2

既然你的第一个问题已经解决了，这里是第二个答案，等待loop。

<script>

    const forLoop = async _ => {
        console.log('Start')
        //...

        for (var i = 0; i < 24; i++) {
            var block;
            if (i < 16) block = `<div class="wrapper"><div class="gap" id="imem_ingess${i}"></div><div class="container"><div class='title'>IMEM ingress ${i} Graph</div><div class="description">hey1</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_ingess${i}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_ingess${i}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_ingess${i}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;
            else block = `<div class="wrapper"><div class="gap" id="imem_egess${i - 16}"></div><div class="container"><div class='title'>IMEM egress ${i - 16} Graph</div><div class="description">hey2</div></div><div class="pt-2 pb-2"></div><div class="chart-container" id="imem_egess${i - 16}_chart_container" style="position: relative; height:200rem; width:95vw; display: block;"><canvas id="imem_egess${i - 16}_chart" style="height: 30%; width: 30%;  display: block;"></canvas></div><div class="pt-4 pb-5"></div><div class="chart-container" id="imem_egess${i - 16}_chart_container2" style="position: relative; height:80rem; width:95vw; display: block;"><canvas id="imem_egess${i - 16}_chart2" style="height: 30%; width: 30%;  display: block;"></canvas></div></div>`;

            await $('#imem_statistics_page').append(block);// will wait
        }

        //...
        console.log('End')
    }

    forLoop()

</script>

测试截图

相关链接

JavaScript async and await

Await in a for loop