Przepraszam, jeśli nie potrafię dobrze wytłumaczyć, mam funkcję (kod poniżej), który analizuje JSON i stworzyć siatkę 1550 pozycji, jak można je dodać jeden po drugim i nie wszystkie razem? Ponieważ w ten sposób działa dobrze, ale ładunek 1500 wymaga czasu.

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) {
      mainWindow.webContents.executeJavaScript(`
        document.getElementById("grid").innerHTML += '<a href="${json[i].desc}"><div class="cell" id=${i}>${json[i].title}</div> </a>'
      `)

    }
  })
}

W poniższym kodzie tworzę okno, pokaż ekran powitalny, a następnie pokazać główne okno. A następnie nazywam funkcję w aplikacji gotowej

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);

Dzięki za wszelką pomoc

0
CheckMate 26 październik 2020, 11:39

1 odpowiedź

Najlepsza odpowiedź

Twoje pytanie jest dobre. Jest fundamentalny z programowaniem asynchronizacji. Powinieneś wymienić funkcję z:

Opcja A)

Jeśli kolejność elementów ma , a nie materia.

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);
    }
  })
}

To sprawia, że każda pętla Ityzacji Async - więc każda iteracja pętli jest wykonywana bez oczekiwania na poprzednie iteracje pętli.

Opcja B)

Jeśli kolejność przedmiotów ma znaczenie.

Strona nie zamraża, ale wszystkie iteracje są wykonywane jednocześnie.

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);
    })
}

Sprawia to, że cała pętla async, więc każda pętla iteracja czeka na poprzednie iteracje, więc użytkownik nie doświadczył żadnego utknięcia. Ale będzie wykonywać wszystkie iteracje na raz ... :(

Aby uzyskać najlepsze z obu światów, możesz rozważyć to:

Opcja C)

Dokładnie to, co sobie wyobrażałeś.

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);
    })
}

W tym kodzie mówię, że przeglądarka "Nie czekaj na koniec pętli, ale każda iteracja, która jest wykonywana tylko po zakończeniu ostatniego.

Opcja D)

Ładuje JSON z korzyściami Async i wykonać i renderować tylko raz.

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);
    })
}
1
Yuval Zilber 26 październik 2020, 11:06