javascript - How do you call functions in order? -

i have javascript code looks this:

function restoreoptions() { console.log('load start');   browser.storage.local.get('setting', (res) => {     console.log('get settings start');     var showroll = document.getelementbyid('showroll');     var show12coin = document.getelementbyid('show12coin');     showroll.checked = res.setting.displayroll;     show12coin.checked = res.setting.set12coin;     console.log('get settings end');   });   browser.storage.local.get('roll', (res) => {     console.log('get roll start');     var optd00001 = document.getelementbyid('d00001');     var optd00005 = document.getelementbyid('d00005');     var optd00010 = document.getelementbyid('d00010');     var optd00025 = document.getelementbyid('d00025');     var optd00100 = document.getelementbyid('d00100');     var optd00200 = document.getelementbyid('d00200');     optd00001.value = res.roll.d00001 / 0.01;     optd00005.value = res.roll.d00005 / 0.05;     optd00010.value = res.roll.d00010 / 0.1;     optd00025.value = res.roll.d00025 / 0.25;     optd00100.value = res.roll.d00100;     optd00200.value = res.roll.d00200 / 2;     console.log('get settings end');   });   toggle(); }  function toggle() {     console.log('toggle start');     var showroll = document.getelementbyid('showroll');     var rollset = document.getelementbyid('rollset');     var show12coin = document.getelementbyid('show12coin');     var coin12options = document.getelementbyid('coin12options');     console.log(showroll.checked);     if (showroll.checked) {         rollset.style.display = 'block';         console.log(showroll.checked);     } else {         rollset.style.display = 'none';         console.log(showroll.checked);     } }  restoreoptions(); 

and browser console output getting:

load start toggle start false false settings start settings end roll start settings end 

whenever code executes, toggle() run before in restoreoptions(), stops code working properly. i'm assuming that's because restoreoptions longer toggle, functions running @ same time.

how can stop toggle() running until restoreoptions() completed? no jquery please.

the behavior you're seeing due browser.storage.local.get being asynchronous. means you're making request, , providing function execute later on when request finished. asynchronous functions execute after synchronous functions have finished, meaning toggle execute before callback functions of restoreoptions run.

to fix this, have 2 options: roll out own solution calls toggle if both callback functions have finished, or use promises. in terms of maintainability, promises more better option. if you're using firefox, browser.storage.local.get returns promise already. if you're using chrome, create promise manually, or import small library does you.

here how use promises:

function getfromstorage(key) {   return new promise((resolve, reject) => {     browser.storage.local.get(key, resolve);   }); }  function restoreoptions() {   console.log('load start');   promise.all([      getfromstorage('setting').then((res) => {       console.log('get settings start');       // ... synchronous code       console.log('get settings end');     }),      getfromstorage('roll').then((res) => {       console.log('get roll start');       // ... synchronous code       console.log('get settings end');     })    ]).then(toggle); }  function toggle() {   console.log('toggle start');   // ... synchronous code }  restoreoptions();