Non riconosce la funzione function tempo()

**lanvoel** · 07-08-2023, 17:16

Il codice qui riportato non funziona perché riporta l'errore: tempo in not a function
Ma se si abolisce la riga in grassetto:
function avvia() {
e la riga che chiude la funzione, anche in grassetto:
}
la function tempo() è riconosciuta e il programma funziona e si vede la pallina rimbalzare sulle pareti.
Perché questo strano comportamento?
Grazie

lanvoel

codice:

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width"300" height="200" style="border:1px solid red; background:cyan";>
</canvas><br>
<input type="button" value="avvia1" onclick="avvia()">
<input type="button" value="ferma" onclick="ferma()">
<script>
var tempo1;
var tempo;
var x=1;
var y=1;
dx=1;
dy=1;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


function avvia() {
tempo1=window.setInterval("tempo()",10);
function tempo() {
ctx.clearRect(0,0,myCanvas.width, myCanvas.height);
if(dx==1) {x++;
if(x>=280) {dx=-1}}
if(dx==-1){x--;
if(x<=0) {dx=1}
}
if(dy==1) {y++;
if(y>=180) {dy=-1}}
if(dy==-1){y--;
if(y<=0) {dy=1}
}
ctx.beginPath()
ctx.strokeStyle="red";
ctx.lineWidth=4;
ctx.fillStyle="blue"
ctx.arc(10+x,10+y,10,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
} 
}


function ferma() {
clearInterval(tempo1);
}


</script>
</body>
</html>

**alka** · 07-08-2023, 17:45

Originariamente inviata da lanvoel

Il codice qui riportato non funziona perché riporta l'errore: tempo in not a function
Ma se si abolisce la riga in grassetto:
function avvia() {
e la riga che chiude la funzione, anche in grassetto:
}
la function tempo() è riconosciuta e il programma funziona e si vede la pallina rimbalzare sulle pareti.
Perché questo strano comportamento?

La funzione tempo() è definita all'interno della funzione avvia().

Per il resto, spero che il codice originale non abbia questa formattazione: in caso contrario, credo che qualsiasi sviluppatore si rifiuterebbe di analizzarlo, non prima di averlo correttamente indentato.

**optime** · 07-08-2023, 18:09

metti le cose in ordine

che si capisce meglio

codice:

function avvia() {
   tempo1 = window.setInterval("tempo()", 10);


   function tempo() {
      ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
      if (dx == 1) {
         x++;
         if (x >= 280) {
            dx = -1
         }
      }
      if (dx == -1) {
         x--;
         if (x <= 0) {
            dx = 1
         }
      }
      if (dy == 1) {
         y++;
         if (y >= 180) {
            dy = -1
         }
      }
      if (dy == -1) {
         y--;
         if (y <= 0) {
            dy = 1
         }
      }
      ctx.beginPath()
      ctx.strokeStyle = "red";
      ctx.lineWidth = 4;
      ctx.fillStyle = "blue"
      ctx.arc(10 + x, 10 + y, 10, 0, 2 * Math.PI);
      ctx.fill();
      ctx.stroke();
      ctx.closePath();
   }
}




function ferma() {
   clearInterval(tempo1);
}

**lanvoel** · 07-08-2023, 22:35

Questo secondo programma rassomiglia al precedente, solo che non usa Canvas.
La funzione muove() è definita all'interno della funzione avvia() , viene riconosciuta ed eseguita.
Mentre nel programma precedente la funzione tempo() è definita all'interno di avvia(), non viene riconosciuta come funzione e non viene eseguita.
Perché questa differenza?
Penso che si può definire una funzione all'interno di un'altra. O no? O che si deve fare per definirla all'interno di un'altra?
Grazie.

lanvoel

codice:

<!doctype html>
<html>
<body>
<input type="button" value="avvia1" onclick="avvia()">
<input type="button" value="ferma1" onclick="ferma()">
<div id="div0" style="position: absolute; left=0px; top:30px; width:330px; height:180px; border: 3px solid blue;"></div>
<div id="div1" style="position: absolute;  left=40px; top:35px; width:10px; height:10px; border: 1px solid red;"></div>
<div id="div2" style="position: absolute;  left=0px; top:220px; width:330px; height:50px; border: 2px solid red";>numero urti:=</div>


		<script>
var cronometro;
var sinistra=40;
var alto=35;
var dir_sin=1;
var dir_alto=1;
var contaUrti=0;
	function avvia() {
		cronometro=window.setInterval("muove()", 10);
		}
function muove() {
	if (dir_sin==1){
		sinistra++; 
if (sinistra ==330) {
	document.getElementById("div1").style.background="cyan";
	document.getElementById("div0").innerHTML="tic";
	document.getElementById("div0").style.background="blue";
	document.getElementById("div0").style.color="cyan";
	document.getElementById("div2").style.background="red";
	dir_sin=-1;
     contaUrti++; 
     document.getElementById("div2").innerHTML="numero urti= "+contaUrti;
}}
if(dir_sin==-1){
	sinistra--;
	if(sinistra==10){
		document.getElementById("div1").style.background="red";
        document.getElementById("div0").style.background="orange";
	document.getElementById("div0").innerHTML="toc";
	document.getElementById("div0").style.color="yellow";
        document.getElementById("div2").style.background="green";
		dir_sin=1;
     contaUrti++; 
     document.getElementById("div2").innerHTML="numero urti= "+contaUrti;
}}
		
		if (dir_alto==1){
		alto++; 
if (alto ==205) {
	document.getElementById("div1").style.background="orange";
	document.getElementById("div0").style.background="green";
	document.getElementById("div0").innerHTML="tac";
	document.getElementById("div0").style.color="white";
	document.getElementById("div0").style.textAlign="center";
	document.getElementById("div0").style.fontSize="50px";
	document.getElementById("div0").style.fontFamily="Algerian";
	document.getElementById("div2").style.background="red";
	dir_alto=-1;
    contaUrti++; 
     document.getElementById("div2").innerHTML="numero urti= "+contaUrti;
}}
if(dir_alto==-1){
	alto--;
	if(alto==30){
		document.getElementById("div1").style.background="green";
	document.getElementById("div0").innerHTML="tec";
	document.getElementById("div0").style.color="blue";
		document.getElementById("div0").style.background="cyan";
		document.getElementById("div2").style.background="orange";
		dir_alto=1;
     contaUrti++; 
     document.getElementById("div2").innerHTML="numero urti= "+contaUrti;
}}


div1.style.left=sinistra+"px";
div1.style.top=alto+"px";
}
function ferma() {
	clearInterval(cronometro);
	}
</script>
</body>
</html>

**alka** · 07-08-2023, 22:48

Originariamente inviata da lanvoel

Mentre nel programma precedente la funzione tempo() è definita all'interno di avvia(), non viene riconosciuta come funzione e non viene eseguita.
Perché questa differenza?
Penso che si può definire una funzione all'interno di un'altra. O no? O che si deve fare per definirla all'interno di un'altra?
[...]

No, nel codice precedente esiste una funzione tempo(), ma anche tempo1(), e pure una variabile tempo().

In breve, si può senz'altro definire una funzione all'interno di un'altra e richiamarla, ovviamente sempre all'interno della funzione in cui è definita.

In questo caso però, il codice è disordinato oltreché errato dal punto di vista logico, poiché vi sono identificatori uguali per cose diverse e callback che invocano funzioni identificandole come stringhe le quali hanno nomi in comune con variabili addirittura globali e isolati in funzioni che non le richiamano.

**lanvoel** · 08-08-2023, 10:27

Prima di tutto ringrazio aika per le risposte.
Nel codice che inserisco ora, invece di tempo1 e tempo(), per evitare confusioni, ho inserito gli identificatori cronometro e muove() e uso l'indentazione che avevo tolto per accorciare il programma e vederlo meglio in una schermata.
Funziona perfettamente perché ho commentato le righe
// function avvia() {
// }
Ma se si toglie il commento alle due righe, la funzione muove() diventa interna alla funzione avvia() e, non so perché, non viene riconosciuta e dà l'errore "muovi is not a function".
E' da notare che, nel secondo programma che ho inserito precedentemente, la funzione muove(), che è interna ad avvia(), è riconosciuta ed eseguita correttamente.

Il motivo del malfunzionamento non è quindi la confusione di identificatori. Ringraziando ancora per l'aiuto spero di trovare il motivo del malfunzionamento

lanvoel

codice:

<!doctype html>
<html>
<body>
<canvas id="myCanvas" width"300" height="200" style="border:1px solid red; background:cyan";></canvas>
<br>
<input type="button" value="avvia1" onclick="avvia()">
<input type="button" value="ferma" onclick="ferma()">
<script>
var cronometro;
var x=1;
var y=1;
dx=1;
dy=1;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");


//function avvia() {
      cronometro=window.setInterval("muove()",10);
function muove() {
   ctx.clearRect(0,0,myCanvas.width, myCanvas.height);
   if(dx==1) {
   x++;
   if(x>=280) {dx=-1}
   }
   if(dx==-1){
   x--;
   if(x<=0) {dx=1}
   }
   if(dy==1) {
   y++;
   if(y>=180) {dy=-1}
   }
   if(dy==-1){
   y--;
   if(y<=0) {dy=1}
   }
ctx.beginPath()
ctx.strokeStyle="red";
ctx.lineWidth=4;
ctx.fillStyle="blue"
ctx.arc(10+x,10+y,10,0,2*Math.PI);
ctx.fill();
ctx.stroke();
ctx.closePath();
   } 
//}


function ferma() {
clearInterval(cronometro);
}


</script>
</body>
</html

**alka** · 08-08-2023, 10:36

Originariamente inviata da lanvoel

Ma se si toglie il commento alle due righe, la funzione muove() diventa interna alla funzione avvia() e, non so perché, non viene riconosciuta e dà l'errore "muovi is not a function".
[...]

Stai passando a setInterval() una stringa che contiene un pezzo di codice dove viene chiamata la funzione muove(), che quando verrà eseguita non esisterà più, dato che l'esecuzione sarà posticipata di un certo lasso di tempo trascorso il quale ci si troverà già al di fuori della funzione che la definisce, ovvero fuori da avvia().

A parte che continuo a non comprende il motivo per cui si vuole obbligatoriamente definire quella funzione dentro l'altra, visto che non è una strada obbligata e mi sfuggono i vantaggi nel farlo, ma l'unico modo per far "sopravvivere" la funzione anche all'esterno di avvia() è sfruttare il meccanismo della Closure.

Ad esempio, si può scrivere il codice in questo modo:

codice:

cronometro = window.setInterval(muove, 10);

**optime** · 08-08-2023, 11:16

lanvoel, confrontando i due listati che hai postato, non mi pare che siano ugual

codice:

function avvia() {
tempo1=window.setInterval("tempo()",10);
function tempo() {
...

codice:

function avvia() {
        cronometro=window.setInterval("muove()", 10);
        }
function muove()
...
{

in particolare, nella seconda, muove() NON sta all'interno di avvia()...

**lanvoel** · 08-08-2023, 12:23

Optime grazie! hai trovato il mio errore.
Nel primo listato dovevo chiudere la funzione avvia() con }, prima dalla funzione tempo() e non alla sua fine; così:
function avvia(){
tempo1=window.setInterval("tempo()",10);
}
function tempo(){
...
}
e tutto funziona.
IIl fatto è che il codice era fatto in modo che il moto partisse con l'avvio del programma. La funzione avvia() l'ho messa dopo, perché volevo (e così rispondo ad aika che ringrazio anche) che il moto partisse al click dell'utente e la sua chiusura l'ho messa nel punto sbagliato.
DDesideravo chiedere una spegazione: Come mai i listati che inserisco completi, quando esco dal Forum e poi vi rientro, li vedo solo nella prima parte e non c'è la barra di scorrimento verticale per vedere la seconda parte.e

**optime** · 08-08-2023, 12:55

l'errore si vedeva già dal mio primo post, dove avevo messo in ordine (indentato) il codice -- alka docet

Discussione: Non riconosce la funzione function tempo()

Strumenti discussione

Ricerca discussione

Visualizza

Non riconosce la funzione function tempo()

Permessi di invio