Come bloccare un SetInterval?

**emanueledg** · 13-02-2007, 16:47

Ciao,
ho realizzato un semplice marquee a scorrimento verticale con due layer che funziona perfettamente.
Dovrei creare la classica funzione di stop su mouseOver e restart su mouseOut.

Codice PHP:


<script type="text/javascript">

<!--

window.onload = vscroll();



function vscroll() {

var d = document;

var handle = setInterval(function(){

var container = d.getElementById("container");

var inner = d.getElementById("inner");

var innerPos = (inner.style.top.split("px"))[0];

if (-innerPos == inner.offsetHeight) { inner.style.top = container.style.height; }

else { inner.style.top = (innerPos - 1) + "px"; }

}, 10);

}

//-->

</script>

I layer HTML sono questi:

codice:

<div id="container" style="width: 400px; height: 30px; border: 1px solid #999; overflow: hidden;">
<div id="inner" style="position: relative; top: 0px; background-color: #def;">
testo

prova

testo

prova



</div>
</div>

Ho fatto varie prove passando la variabile handle nella funzione clearInterval() con l'handler onMouseOver, ma senza successo.
Potreste indicarmi una soluzione?

**Xinod** · 13-02-2007, 19:34

se handle e' locale non puoi farvi riferimento fuori dalla funzione, quindi rimuovi il var prima di handle per renderla globale
e quando serve, onmouseover mi sembra di aver capito, richiama una funzione che contenga
if(handle) clearInterval(handle);
ciao

**emanueledg** · 14-02-2007, 01:17

Grazie Xinod,
avevi perfettamente ragione, la variabile doveva essere globale.
Non sapevo bene che in questo caso la dichiarazione "var" la rendesse disponibile solo all'interno della funzione in cui viene dichiarata.

Infatti i vari tutorial sul web sono un po' nebulosi a riguardo; lo stesso tutorial su html.it parla di variabili locali se dichiarate all'interno della funzione e globali se dichiarate fuori dalle funzioni, all'interno dello script.
http://javascript.html.it/guide/lezi...one-variabili/

A beneficio del pubblico servigio forense, riporto qui la soluzione raggiunta, ovvero un degno sostituto (crossbrowser) del tag <marquee>, inizialmente introdotto da MSIE e in seguito adottato anche dagli altri, ma ormai deprecato dal W3C:

codice:

<html>
<title>Marquee W3C compliant con JavaScript</title>
<head>
<script language="javascript" type="text/javascript">
<!--
window.onload = vscroll;

function vscroll() {
var d = document;
handle = setInterval(function(){
var container = d.getElementById("container");
var inner = d.getElementById("inner");
var innerPos = (inner.style.top.split("px"))[0];
if (-innerPos == inner.offsetHeight) { inner.style.top = container.style.height; }
else { inner.style.top = (innerPos - 1) + "px"; }
}, 70);
}

function vstop() {
window.clearInterval(handle);
}
//-->
</script>
</head>

<body>
<div id="container" style="width: 400px; height: 100px; border: 1px solid #999; overflow: hidden;" onMouseOver="vstop();" onMouseOut="vscroll();">
<div id="inner" style="position: relative; top: 0px; background-color: #def;">
testo

prova

testo

prova



</div>
</div>
</body>

Ho aumentato lo scrolldelay da 10 a 70 msec perché ho notato un carico non trascurabile delle risorse del sistema all'avvio dello scroll, pur senza ridurre eccessivamente la leggibilità del testo in movimento.

Discussione: Come bloccare un SetInterval?

Strumenti discussione

Ricerca discussione

Visualizza

Come bloccare un SetInterval?

Permessi di invio