consigli sulla temporizzazione

[oronze]

salve, ho realizzato una classe in javascript per lo slide di un div

function Slider(cosa){
        this.tempo = 5;
        this.vel = 10;
        this.mov = 2;
        this.id = cosa;
        this.start = 100-document.getElementById(this.id).offsetHeight;
        if(this.start%2!=0) this.start++;
        this.end = this.start+document.getElementById(this.id).offsetHeight;
        if(this.end%2!=0) this.end++;
        document.getElementById(this.id).style.top=this.start+"px";
            
            this.getPosition = function(){
                return parseInt(document.getElementById(this.id).style.top);
            };

            this.scendilo = function(){
                var scope = this;
                if(this.getPosition() < this.end){
                    document.getElementById(this.id).style.top=this.getPosition()+this.mov+"px";
                    setTimeout(function(){scope.scendilo()}, this.vel);
                }
            };

            this.salilo = function(){
                var scope = this;
                if(this.getPosition() > this.start){
                    document.getElementById(this.id).style.top=this.getPosition()-this.mov+"px";
                    setTimeout(function(){scope.salilo()}, this.vel);
                }
            };

            this.move = function(){
                if (this.getPosition() == this.start) {
                    this.scendilo();
                }
                else{
                    this.salilo();
                }
            }
                        
    } 

cosa mi consigliate per rendere il movimento fluido e magari renderlo più lento di com'è ora? se modifico il tempo del setTimeout l'animazione sembra scattosa...inoltre il controllo per l'arrivo è corretto così oppure lo fareste in un altro modo?

[whisher]

https://developer.mozilla.org/En/DOM/Window.setInterval

[oronze]

non capito...conosco il metodo setInterval...ma la stessa cosa la ottengo con setTimeout...cosa cambia?

[whisher]

Originariamente inviato da oronze
non capito...conosco il metodo setInterval...ma la stessa cosa la ottengo con setTimeout...cosa cambia?

http://www.evolt.org/article/Using_s...ener/17/36035/

[oronze]

trovo questo link molto più chiaro:
http://stackoverflow.com/questions/7...or-setinterval

inoltre ho modificato la classe così...ma quando clicco la prima volta per far uscire il div non ci sono problemi di nessun tipo...la seconda volta ce ne sono parecchi...il div scatta vistosamente e poi si pianta il browser....cosa sbaglio?

    function Slider(cosa){
        this.tempo = 5;
        this.vel = 100;
        this.mov = 2;
        this.id = cosa;
        this.start = 100-document.getElementById(this.id).offsetHeight;
        var timeout;
        var timeout2;
        var scope = this;
        if(this.start%2!=0) this.start++;
        this.end = this.start+document.getElementById(this.id).offsetHeight;
        if(this.end%2!=0) this.end++;
        document.getElementById(this.id).style.top=this.start+"px";
            this.getPosition = function(){
                return parseInt(document.getElementById(this.id).style.top);
            };
            function scendilo(){
                if(this.getPosition() >= this.end){
                    clearInterval(timeout);
                    return;
                }
                    document.getElementById(this.id).style.top=this.getPosition()+this.mov+"px";
                    timeout = setInterval(function(){scope.scendilo()}, this.vel);
            };
            function salilo(){
                if(this.getPosition() <= this.start){
                    clearInterval(timeout2);
                    return;
                }
                    document.getElementById(this.id).style.top=this.getPosition()-this.mov+"px";
                    timeout2 = setInterval(function(){scope.salilo()}, this.vel);
            };
            this.move = function(){
                if (this.getPosition() == this.start) scendilo();
                else salilo();
            }
    } 

[oronze]

questa è la versione funzionante e corretta della classe...se a qualcuno servisse per delle modifiche eccola...

    function Slider(cosa){
        this.vel = 1;
        this.mov = 1;
        this.id = cosa;
        this.start = 100-document.getElementById(this.id).offsetHeight;
        var scope = this;
        this.end = this.start+document.getElementById(this.id).offsetHeight;
        document.getElementById(this.id).style.top=this.start+"px";
            function getPosition(){
                return parseInt(document.getElementById(scope.id).style.top);
            };
            function scendilo(){
                    document.getElementById(scope.id).style.top = getPosition() + scope.mov + "px";
                    if (getPosition() >= scope.end) clearInterval(timeout);
            };
            function salilo(){
                    document.getElementById(scope.id).style.top = getPosition() - scope.mov + "px";
                    if (getPosition() <= scope.start) clearInterval(timeout);
            };
            this.move = function(){
                if (getPosition() == this.start) timeout = setInterval(scendilo, scope.vel);
                else timeout = setInterval(salilo, scope.vel);
            }
    }