[Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione

[jk82]

Salve a tutti,

premetto che sono veramente alle prime armi con js e con gran fatica e lunghe ricerche sono riuscito a inserire un generatore di numeri casuale con pulsante di input all'interno di un sito web.

Ciò che però vorrei è che dopo la pressione del pulsante di input e la comparsa a schermo del risultato, vorrei inserire una sorta di animazione di caricamento ed un effetto sonoro

Quindi in pratica ritardare per qualche secondo l'uscita del risultato mentre nell'attesa compare una gif di caricamento. Dopodichè udire un suono in contemporanea con l'uscita del risultato.

Premetto che non so se nemmeno è possibile fare quanto sto chiedendo, per questo mi rivolgo a voi almeno per delle dritte sul come arrivare a questo risultato.

Questo il codice per far capire meglio

function IsNumeric(n){
    return !isNaN(n);
}

$(function(){
   
    $("#getit").click(function() {
   
        var numLow = $("#lownumber").val();
        var numHigh = $("#highnumber").val();
       
        var adjustedHigh = (parseFloat(numHigh) - parseFloat(numLow)) + 1;
       
        var numRand = Math.floor(Math.random()*adjustedHigh) + parseFloat(numLow);
       
        if ((IsNumeric(numLow)) && (IsNumeric(numHigh)) && (parseFloat(numLow) <= parseFloat(numHigh)) && (numLow != '') && (numHigh != '')) {
            $("#randomnumber").text(numRand);
        } else {
            $("#randomnumber").text("Careful now...");
        }
       
        return false;
    });
   
    $("input[type=text]").each(function(){
        $(this).data("first-click", true);
    });
   
    $("input[type=text]").focus(function(){
       
        if ($(this).data("first-click")) {
            $(this).val("");
            $(this).data("first-click", false);
            $(this).css("color", "black");
        }
       
    });
   
});

 

[WmbertSea]

Premetto che non so se nemmeno è possibile fare quanto sto chiedendo, per questo mi rivolgo a voi almeno per delle dritte sul come arrivare a questo risultato.

Ciao, non so se sei già riuscito ad andare avanti, per il momento posso darti giusto qualche consiglio.
Ti dico che ciò che chiedi è possibile farlo e non è così complicato.

Per l'attesa puoi usare la funzione setTimeout.

Per l'animazione di caricamento ti consiglio una qualche soluzione in css piuttosto che una gif, ad esempio impostando una certa classe per la quale viene mostrata l'animazione. In questo modo puoi applicare tale classe in maniera semplice via JavaScript e rimuoverla nella funzione richiamata dal setTimeout.

Per l'audio puoi usare un semplice oggetto <audio> (HTML5) impostandolo in modo che non venga eseguito in autoplay. A quel punto lo esegui col metodo play() nella funzione del setTimeout.

Queste sono delle indicazioni di massima, magari cerca di risolvere una parte alla volta, poi se ti serve ulteriore aiuto chiedi sempre qui postando eventualmente la parte che sei riuscito a sviluppare.

PS: Oltre allo script sarebbe opportuno poi postare anche la parte html relativa a quello script, altrimenti è difficile, per chi cerca di aiutarti, poter riprodurre la situazione.