如何执行一个 for-loop function，然后在 for-loop function 完成一个按钮后调用另一个 function？

Question

在单击按钮时使用 Papaparse 解析一些 CSV 后，我正在尝试运行 function。 我只能用两个不是最好的按钮让它工作。 实际上，我还有一些代码可以使用 push() 方法更新 selected_csv 数组。

我想要做的是将选定的csv数组提供给Papaparse for-loop并将结果推送（）到combined_array，然后由gentable function到append使用图像表。 我尝试过异步并等待，认为它就像在 function 中添加异步和等待一样简单。 但这根本不起作用。

任何帮助将不胜感激。 通过阅读大量 stackoverflow 问题并进行修改，我已经走到了这一步。 但我似乎无法让最后一点工作。

 var combined_arrays = []; function update() { var selected_csv = ['https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%201%20(State)%20(with%20subtitles).csv', 'https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%202%20(Condition)%20(with%20subtitles).csv']; //parse each entry of array and gen cards for (let l = 0, n = selected_csv.length; l < n; l++) { Papa.parse(selected_csv[l], { download: true, delimiter: ",", skipEmptyLines: true, header: true, complete: function(result) { //let selected_data = result.data; combined_arrays.push(...result.data); } }); }; }; function gentable() { var comb = combined_arrays; var columns = 6, table = document.createElement('table'), tbody = table.appendChild(document.createElement('tbody')), tr, td, img; let display = document.getElementById("cards"); for (i = 0, l = comb.length; i < l; i++) { if (i % columns == 0) tr = tbody.appendChild(document.createElement('tr')); let card = document.createElement("div"); card.setAttribute('class', 'card'); let qimages = document.createElement('img'); qimages.setAttribute('class', 'qimages'); qimages.setAttribute('src', '../.assets/' + comb[i].value); tr.appendChild(document.createElement('td')).appendChild(card).appendChild(qimages) //.src = '../.assets/' + combined_arrays[i].value; } display.appendChild(table).setAttribute('class', 'card_table'); };

 <script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"></script> <div id='cards'> </div> <button onclick='update()'> testing </button> <button onclick='gentable()'> gentable </button>

Answer 1

我希望这会有所帮助，你想实现这个吗？ 以便 function 更新调用 gentable。 让我知道！

 var combined_arrays = []; function update() { var selected_csv = ['https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%201%20(State)%20(with%20subtitles).csv', 'https://raw.githubusercontent.com/letsnotmakejunk/flashcards/main/Adjectives%202%20(Condition)%20(with%20subtitles).csv']; //parse each entry of array and gen cards for (let l = 0, n = selected_csv.length; l < n; l++) { Papa.parse(selected_csv[l], { download: true, delimiter: ",", skipEmptyLines: true, header: true, complete: function(result) { //let selected_data = result.data; combined_arrays.push(...result.data); if (l + 1 === selected_csv.length) { gentable(); } } }); }; }; function gentable() { var comb = combined_arrays; var columns = 6, table = document.createElement('table'), tbody = table.appendChild(document.createElement('tbody')), tr, td, img; let display = document.getElementById("cards"); for (i = 0, l = comb.length; i < l; i++) { if (i % columns == 0) tr = tbody.appendChild(document.createElement('tr')); let card = document.createElement("div"); card.setAttribute('class', 'card'); let qimages = document.createElement('img'); qimages.setAttribute('class', 'qimages'); qimages.setAttribute('src', '../.assets/' + comb[i].value); tr.appendChild(document.createElement('td')).appendChild(card).appendChild(qimages) //.src = '../.assets/' + combined_arrays[i].value; } display.appendChild(table).setAttribute('class', 'card_table'); };

 <script src="https://unpkg.com/papaparse@5.3.2/papaparse.min.js"></script> <div id='cards'> </div> <button onclick='update()'> 2 in 1 </button>

Answer 2

由于我不明白如何编写 promise 和回调。 我写了一个愚蠢的 setTimeout function 代替。 它将调用一个 for 循环，休眠一会儿，解析数据，休眠一会儿，然后生成一个表。 这不是很好的答案，所以请不要模仿。

function startFunctionsSeq() {
  combined_arrays.length = 0;
  setTimeout(removeold, 0);
  setTimeout(update, 100);
  setTimeout(gentable, 300);
  $('#game-board').attr('style', 'display: none')
}