Fermare oggetto che si muove al click del mouse - Javascript

[Federica Torrisi]

Salve a tutti avrei bisogno di un aiuto. In pratica ho un oggetto che rimbalza all'interno di un rettangolo. Quando clicco sull'oggetto, questo dovrebbe fermarsi e riprendere il suo percorso al successivo click o dopo 10 secondi. Sapete come implementare questa parte?
Di seguito il codice che ho scritto affinchè l'oggetto 'figure' si muove all'interno del mio rettangolo.

<script>
    function myMove() {
        
        var elem = document.getElementById("figure");   
        var pos = 0;
        var id = setInterval(frame, 200);
        
    
        function frame() {         
            if (pos==300) {
                clearInterval(id);                         
            } else {
                pos++;
                elem.style.top = (300-pos) + 'px';
                elem.style.left =  (pos<150?(pos*6):-6*(pos-300)) + 'px';                   
            }
        }
    }
</script>

 

[otto9due]

Hai provato ad usare setTimeout()? Esegue uno script, una sola volta, appena finito il tempo impostato.. potrebbe fare al caso tuo.
Puoi anche associarlo a qualsiasi evento o racchiuderlo in una funzione, dai un'occhiata qui, sono da call al momento https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_settimeout


Saluti G.G.