JQuery 无效或意外的令牌并等待循环先完成
JQuery Invalid or unexpected token and wait for loop to finish first
代码:
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) 我想等待循环完成后再执行剩余的代码。
提前致谢!
首先,你有一个额外的u200b character
。其次,您可以使用 setTimeout
函数。
setTimeout(function(){
// doing async stuff
}, 1000);
既然你的第一个问题已经解决了,这里是第二个答案等待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>
Screenshot of test
Related Link
代码:
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) 我想等待循环完成后再执行剩余的代码。
提前致谢!
首先,你有一个额外的u200b character
。其次,您可以使用 setTimeout
函数。
setTimeout(function(){
// doing async stuff
}, 1000);
既然你的第一个问题已经解决了,这里是第二个答案等待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>
Screenshot of test
Related Link