Dotaz: Přerušení kódu ve funkci setTimeout z jiné funkce - Javascript

[Saša]

Ahoj, mám problém s kódem v javascriptu, respektive s řešením problému

1. v HTML souboru mám prvky button reagující na onlick="start()", cancas s funkcí reagující na onclick="stop" 2. po spuštění funkce start se volá funkce nahravej, ve které se nahrává obrázek do canvasu a v jeho funkci img.onLoad se spouští funkce setTimeout. Po ukončení funkce setTimeout se vyvolá dialog 3. Při kliknutí na canvas se zavolá funkce stop, která skryje nějaká pole na stránce a odstraní obrázek z canvasu

Problém Kliknu na canvas, zobrazí se dialog o ukončení, potvrdím ho, provede se změna na html stránce (skytí polí, odstranění img z canvasu) ale vyběhne dialog po doběhnutí funkce setTimeout. Jak upravit kód, aby vyvolání funkce zastavilo i provádení kódu ve funkci setTimeout, respektive zobrazení dialogu?

Díky za případnou radu

var start = function () {
    isRuns = true;
    $('#pageMainImgDiv').hide(); 
    nahravej();
    
};

var stop = function () {
    // vynechan dialog ohledne ukonceni a dalsi akce ohledne manipulace s prvky na html strance
    isRuns = false;
    $('#pageMainImgDiv').show();
};


var nahravej = function () {
    var timing = 5000;
    var newSrc = "mujImage.png";

        var img = new Image();
        img.src = 'images/' + newSrc;
        img.onload = function () {
            var canvas = document.getElementById('mainCanvas');
            var context = canvas.getContext('2d');
            context.canvas.width = window.innerWidth;
            context.canvas.height = window.innerHeight;
            var x = (canvas.width - img.width ) * 0.5;
            var y = (canvas.height - img.height) * 0.5;
            img.width = img.width * 0.50;
            img.height = img.height * 0.50;
            context.drawImage(img, x, y);

            if (isRuns) {
                setTimeout(function () {
                    console.log('Probiha timer');
                    context.clearRect(0, 0, canvas.width, canvas.height);

                    

                        var res = prompt("Vlož čas", "5");
                        if (isNaN(res)) {

                            alert('Chyba není číslo!');

                        } else {

                            console.log('Vlozeno ' + res);
                            nahravej();
                        }
                }, timing);
            }else {
                context.clearRect(0, 0, canvas.width, canvas.height);
            }
        };
    }


};

---

---

Odpovědi

[AraxoN]

Volanie setTimeout() vráti ID časovača:

var id=window.setTimeout(...);

S tým id sa to potom dá zrušiť volaním clearTimeout():

window.clearTimeout(id);

[Saša]

Ahoj, díky, ale to jsem zkoušel, že jsem ve funkci stop volal id setTimeru (ten jsem nastavil ve funkci pro nahravej jako globalni proměnou), bohužel dialog i přesto vyběhl.

[Tarmaq]

a mohl bys to ukazat? Idealne bez tech nezajimavejch casti kolem.. Mozna by nebylo od veci udelat nejakej jsfiddle na to