Your inquiry is quite insightful, particularly in relation to async programming concepts.
You may want to substitute the function with:
option A)
if the sequence of items is not crucial.
async function loop_iteration(json, i) {
mainWindow.webContents.executeJavaScript(`
document.getElementById("grid").innerHTML += '<a href="${json[i].desc}"><div class="cell" id=${i}>${json[i].title}</div> </a>'
`)
}
function additem () {
fs.readFile(path.join(__dirname, 'list.json'), 'utf8', (err, data) => {
if (err) {
alert('Could not read file.\n\nDetails:\n' + err.message)
return
}
let json = JSON.parse(data)
for (let i in json) {
loop_iteration(json, i);
}
})
}
This ensures that each loop iteration is executed asynchronously, allowing for independent execution without waiting for prior iterations.
option B)
If maintaining the order of items is important.
The page remains responsive, but all iterations are executed simultaneously.
async function loop(json) {
for (let i in json) {
mainWindow.webContents.executeJavaScript(`
document.getElementById("grid").innerHTML += '<a href="${json[i].desc}"><div class="cell" id=${i}>${json[i].title}</div> </a>'
`)
}
}
function additem() {
fs.readFile(path.join(__dirname, 'list.json'), 'utf8', (err, data) => {
if (err) {
alert('Could not read file.\n\nDetails:\n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}
This approach makes the entire loop asynchronous, ensuring that each iteration waits for the previous one to complete, providing a smooth user experience without freezes or delays.
In order to balance both requirements effectively, consider this option:
option C)
Precisely what you had in mind.
async function loop_iteration(json, i) {
mainWindow.webContents.executeJavaScript(`document.getElementById("grid").innerHTML += '<a href="${json[i].desc}"><div class="cell" id=${i}>${json[i].title}</div> </a>'`)
}
async function loop(json) {
for (let i in json) {
await loop_iteration(json, i);
}
}
function additem() {
fs.readFile(path.join(__dirname, 'list.json'), 'utf8', (err, data) => {
if (err) {
alert('Could not read file.\n\nDetails:\n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}
In this scenario, the browser is instructed to start executing each iteration only after the completion of the previous one in the loop, enhancing efficiency and performance.
Option D)
Utilizes asynchronous loading of the JSON data to render the page content once efficiently.
async function loop_iteration(json, i, arr) {
arr.push(`<a href="${json[i].desc}"><div class="cell" id=${i}>${json[i].title}</div> </a>`)
}
async function loop(json) {
const arr = []
for (let i in json) {
await loop_iteration(json, i, arr);
}
mainWindow.webContents.executeJavaScript(`document.getElementById("grid").innerHTML += '${arr.join('')}'`)
}
function additem() {
fs.readFile(path.join(__dirname, 'list.json'), 'utf8', (err, data) => {
if (err) {
alert('Could not read file.\n\nDetails:\n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}