JS/Electron逐项添加

Question

很抱歉，如果我不能很好地解释自己，我有一个函数(下面的代码(可以解析json并创建一个1550项的网格，如何逐个添加而不是全部添加？因为这种方式效果很好，但加载1500需要时间。

function additem () {
fs.readFile(path.join(__dirname, 'list.json'), 'utf8', (err, data) => {
if (err) {
alert('Could not read file.nnDetails:n' + err.message)
return
}
let json = JSON.parse(data)
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 puziale () {
splash = new BrowserWindow({width: 200, height: 200, transparent: true, frame: false, alwaysOnTop: true});
(async ()=>{  
createWindow(); 
splash.loadFile('splash.html');  
await sleep(2000);  
splash.destroy();
mainWindow.show()

})();



}
app.on('ready', puziale);

感谢的帮助

Answer 1

你的问题很好。它是异步编程的基础。您应该将该功能替换为：

选项A(

如果项目的顺序不重要。

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.nnDetails:n' + err.message)
return
}
let json = JSON.parse(data)
for (let i in json) {
loop_iteration(json, i);
}
})
}

这使得每个循环迭代都是异步的，因此执行每个循环迭代时都不需要等待前面的循环迭代。

选项B(

如果物品的顺序真的很重要。

页面不会冻结，但所有迭代都会同时执行。

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.nnDetails:n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}

这使得整个循环是异步的，所以每个循环迭代都会等待之前的迭代，这样用户就不会遇到任何阻塞。但它将同时执行所有迭代…：(

为了两全其美，你可以考虑这样做：

选项c(

正是你想象的。

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.nnDetails:n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}

在这段代码中，我告诉浏览器"；不要等待for循环结束，但每次迭代都是在最后一次迭代结束后才执行的。

选项D(

加载具有异步优势的JSON，并且只执行和呈现页面一次。

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.nnDetails:n' + err.message)
return
}
let json = JSON.parse(data)
loop(json);
})
}