Comment appeler la fonction asynchrone pour utiliser le retour sur la portée globale

Question

Je suis actuellement aux prises avec un appel function, lorsque j'appelle la fonction d'une instruction if cela fonctionne mais quand je l'appelle de l'extérieur, mon if L'instruction vérifie seulement quel bouton a été enfoncé mais j'essaye de retirer la fonction du bouton et de l'appeler dès que mon application démarre.

Nous examinerons fetchJokes() l'intérieur jokeContainer.addEventListener('click', event => {

Ceci est mon code actuel:

const jokeContainer = document.querySelector('.joke-container'); 
const jokesArray = JSON.parse(localStorage.getItem("jokesData")); 

// Fetch joke count from API endpoint 
async function sizeJokesArray() { 
    let url = 'https://api.icndb.com/jokes/count'; 
    let data = await (await fetch(url)).json(); 
    data = data.value; 
    return data; 
} 

// use API endpoint to fetch the jokes and store it in an array 
async function fetchJokes() { 
    let url = `https://api.icndb.com/jokes/random/${length}`; 
    let jokesData = []; 
    let data = await (await fetch(url)).json(); 
    data = data.value; 
    for (jokePosition in data) { 
    jokesData.push(data[jokePosition].joke); 
    } 
    return localStorage.setItem("jokesData", JSON.stringify(jokesData));; 
} 

const jokeDispenser = (function() { 
    let counter = 0; //start counter at position 0 of jokes array 
    function _change(position) { 
    counter += position; 
    } 
    return { 
    nextJoke: function() { 
     _change(1); 
     counter %= jokesArray.length; // start from 0 if we get to the end of the array 
     return jokesArray[counter]; 
    }, 
    prevJoke: function() { 
     if (counter === 0) { 
     counter = jokesArray.length; // place our counter at the end of the array 
     } 
     _change(-1); 
     return jokesArray[counter]; 
    } 
    }; 
})(); 

// pass selected joke to print on html element 
function printJoke(joke) { 
    document.querySelector('.joke-text p').textContent = joke; 
} 

sizeJokesArray().then(size => (length = size)); // Size of array in response 

jokeContainer.addEventListener('click', event => { 
    if (event.target.value === 'Fetch') {  
    fetchJokes(length); 
    } else if (event.target.value === 'Next') { 
    printJoke(jokeDispenser.prevJoke(jokesArray)); 
    } else if (event.target.value === 'Prev') { 
    printJoke(jokeDispenser.nextJoke(jokesArray)); 
    } 
}); 

Et je suis en train de faire quelque chose comme ceci:

// pass selected joke to print on HTML element 
function printJoke(joke) { 
    document.querySelector('.joke-text p').textContent = joke; 
} 

sizeJokesArray().then(size => (length = size)); // Size of array in response 
fetchJokes(length); 

jokeContainer.addEventListener('click', event => { 
    if (event.target.value === 'Next') { 
    printJoke(jokeDispenser.prevJoke(jokesArray)); 
    } else if (event.target.value === 'Prev') { 
    printJoke(jokeDispenser.nextJoke(jokesArray)); 
    } 
}); 

Par ailleurs, Je suis conscient qu'à l'heure actuelle, vous ne pouvez pas réellement parcourir les éléments du tableau en utilisant prev et next button sans rafraîchir la page, mais je suppose que ce sera un autre q uestion.

ne pouvait pas penser à un meilleur titre. (Modifications bienvenues)

Answer 1

fonctions Async sont, comme son nom l'indique, asynchrone. Dans

sizeJokesArray().then(size => (length = size)); // Size of array in response 
fetchJokes(length); 

vous appelez fetchJokesavantlength = size est exécuté parce que, comme vous l'aurez deviné, sizeJokesArray est asynchrone.

Mais puisque vous utilisez déjà des promesses le correctif est simple:

sizeJokesArray().then(fetchJokes); 

---

Si vous ne l'avez pas bien compris encore comment fonctionnent les promesses, peut-être https://developers.google.com/web/fundamentals/getting-started/primers/promises aide.