JavaScript

setInterval e clearInterval

by Andrea Spera

Un esempio di menù a scomparsa
setInterval è una funzione JavaScript che esegue ripetutamente un'azione a intervalli di tempo specificati (in millisecondi). Continua a eseguire il codice fino a quando non viene fermato esplicitamente.
clearInterval viene utilizzato per fermare un intervallo impostato con setInterval. Si chiama passando l'ID dell'intervallo (restituito da setInterval).
Insieme, queste funzioni gestiscono azioni ripetitive e la loro interruzione.
Codice 
<!DOCTYPE html>
<html>
<head>
<style>
div#menuId{
	visibility: hidden;
	height: 0px;
	overflow: hidden;
	background-color: #ddf;
	width:50%;
	padding: 10px;
	}
div#btn{
	display:inline-block;
	padding: 10px;
	border: 1px solid #ddd;
	cursor:pointer;
	}
</style>
<script>
function aprimenu(id, altezza)
	{
	document.getElementById(id).style.visibility = "visible";
	let c = 1;
	let apri=setInterval(function()
		{
		document.getElementById(id).style.height = c + "px";
		c = c + 2;
		if (c >= altezza)
			{
			clearInterval(apri);
			document.getElementById("btn").innerHTML = "Chiudi menù";
			}
		},1);
	}
function chiudimenu(id, altezza)
	{
	let c = altezza;
	if (c < 2)
		{
		c = 2;
		}
	let chiudi=setInterval(function()
		{
		document.getElementById(id).style.height = c + "px";
		c = c - 2;
		if (c <= 2)
			{
			clearInterval(chiudi);
			document.getElementById(id).style.visibility = "hidden";
			document.getElementById("btn").innerHTML = "Apri menù";
			}
		},1);
	}
</script>
</head>
<body>
<div id="btn">Apri menù</div>
<div id="menuId">
Item 1<br>
Item 2<br>
Item 3<br>
</div>
<script>
function fnct_1()
	{
	aprimenu('menuId', 200);
	document.getElementById("btn").removeEventListener("click", fnct_1);
	document.getElementById("btn").addEventListener("click", fnct_2);
	}
function fnct_2()
	{
	chiudimenu('menuId', 200);
	document.getElementById("btn").removeEventListener("click", fnct_2);
	document.getElementById("btn").addEventListener("click", fnct_1);
	}
document.getElementById("btn").addEventListener("click", fnct_1);
</script>
</body>
</html>
Output
Apri menù