window.onload demarre avant indexed db statements

Version imprimable

Bonjour,

J'ai une fonction appelee checkFlights, une series d'etats pours ouvrir base de donnee indexedDB et un window.onload pour déclencher la fonction checkflights.

Il semblerait que window.onload se declenche avant que la base de donnee se soit ouverte et du coup la fonction checkflights ne fonctionne pas normalement car elle considère la variable db comme null.

Code ci dessous. Merci d'avance pour votre support.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var db = null
    const request = indexedDB.open('MyDataBase', '1');
    //on upgrade needed
    request.onupgradeneeded = e => {
         db = e.target.result
        /* note = {
            title: "note1",
            text: "this is a note"
        }*/
        const myFlights = db.createObjectStore("my_flight", {
            keyPath: "flightid"
        })
 
    }
 
    request.onsuccess = e => {
         db = e.target.result 
 
    }
 
    request.onerror = e => {
        alert(`error: ${e.target.error} was found `)
    }    
 
window.onload = function () {
        checkFlights()
 
    }
 
function checkFlights() {
        const tx = db.transaction("my_flight", "readonly");
        // var objectStore = transaction.objectStore('my_flight');
        const mesVols=tx.objectStore("my_flight")
 
        var countRequest = mesVols.count();
        countRequest.onsuccess = function() {
            console.log(countRequest.result);
            if((countRequest.result>0) && (window.navigator.onLine)){
                sendFlights()
                notify("Flights sent to server")
                }
        }
    }

11/07/2021, 21h16
Doksuri

https://developer.mozilla.org/fr/doc..._et_asynchrone

Citation:

Les opérations effectuées par IndexedDB sont réalisées de manière asynchrone, afin de ne pas bloquer l'application

le plus simple est encore de mettre un flag pour savoir si ta db est "prete" que tu settes a true dans ton onsuccess,
et dans ton checkFlights, tu verifies si ton flag est a true ou pas. s'il ne l'est pas tu re-apelles ta function avec un delais de 10ms (par exemple)

Merci Doksuri,

Merci Doksuri, J'ai fait ce que tu as suggéré et ca marche très bien.
Je colle ci dessous mon code pour ceux que ca pourrait intéressé et je cloture la question.
Encore merci.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 let db = null
        var dbReady = false
        const request = indexedDB.open('maBase', '1')
 
        //on upgrade needed
        request.onupgradeneeded = e => {
            db = e.target.result
            const myFlights = db.createObjectStore("my_flight", {
                keyPath: "flightid"
            })
            dbReady = true
            // return db
        }
 
        request.onsuccess = e => {
            db = e.target.result
            dbReady = true
            // return db
        }
 
        request.onerror = e => {
            // return `error: ${e.target.error} was found `
        }
        // }
 
  window.onload = function () {
            console.log('On load was called')
            let timerId = setInterval(() => {
                if (dbReady = true) {
                    checkFlights()
                    clearInterval(timerId)
                }
            }, 3000);
 
        }
 
 function checkFlights() {
 
            console.log('checkFlight is called')
            const tx = db.transaction("my_flight", "readonly");
            const mesVols = tx.objectStore("my_flight")
 
            var countRequest = mesVols.count();
            countRequest.onsuccess = function () {
                console.log(countRequest.result);
                if ((countRequest.result > 0) && (window.navigator.onLine)) {
                    console.log("There is a record, sendFlights will be called")
                    sendFlights()
                    console.log("Flights sent to server")
                }
            }
        }

15/07/2021, 11h23
NoSmoking
Bonjour,
tout d'abord une petite remarque

Code:

if (dbReady = true) {

tu ne fais pas un test mais une affectation, cela sert donc à rien.

Pourquoi ne pas mettre l'appel de ta fonction dans le onsuccess, qui est qu'en même un peu fait pour cela ?
Code:

1 2 3 4 5 const request = indexedDB.open('maBase', '1'); request.onsuccess = e => { db = e.target.result; checkFlights(); }
Si tu as besoin d'utiliser des éléments du DOM alors tu auras peut être besoin du recours à un écouteur DOMContentLoaded.
20/07/2021, 02h40
Mouss321

Comment n'y ai je pas pense tout seul !!

Merci beaucoup pour ta réponse Nosmoking.
En effet, tellement plus simple.
Et oui il m'arrive de faire encore cette erreur = au lieu == :oops: