Asinhronas darbības JavaScriptā (Horziontāla skrollēšana)

[mandarīnpīle]

Vēlos panākt horizontālas skrollēšanas efektu JavaScriptā. Pieivenotais index.html ir self-containing ar visu jquery un css - būtībā preview ar to, cik tālu man jau ir uztaisīts.

 

Man ir funkcija scroll();, kas izmaina elementa margin un pārbīda to pa labi vai pa kreisi atkarībā no argumentiem

 

Man Ir Javacript funkcija repeat_scroll(); , kas noteiktu skaitu reižu izsauc funkciju scroll(); ar delayiem starpā, tā radot animācijas efektu. Katrai reizei tiek aprēķināts lineāri pieaugošs palielinājums, lai animācija it kā ieskrietos un paliktu ātrāka vai lēnāka atkarībā no argumentiem.

 

Argumentos varu norādīt attālumu, virzienu (pa labi vai kreisi), ātruma palielināšanos vai zaudēšanu, aizturi starp cikla reizēm.

Laai iegūtu efektu, ka elements pabīdās pa labi smooth stilā, jāizsauc funkcija divreiz ar šādiem argumentiem:

 

repeat_scroll('attaļums-100cikli', 'virziens-pa_labi', 'ātrums-augošs', 'aizture,piem,10milis');

repeat_scroll('attaļums-100cikli', 'virziens-pa_labi', 'ātrums-dilstošs', 'aizture,piem,10milis');

 

Problēma tajā, ka izsaucot funkciju pirmo reizi, tā negaida, kad tiks pabeigta, un uzreiz izsaucas arī otrā, rezultātā animācijai rodas personības dalīšanas skriet pa labi vai pa kreisi un nekas nestrādā.

 

Kā panākt, lai otrais funkcijas call's palaistos tikai tad, kad pilnībā izpildīts pirmais?

 

Esmu mēģinājis lietot kaut ko līdzīgu šim:

 

 

repeat_scroll('on_the_right').promise().done(function(){

        alert('Pirmaa funkcija pabeigta');

});

 

bet alert nekad nenostrādā....

Sviests.

 

Pieivenotajā index.html ir preview ar to, kā tas darbojas. Ar mouseenter un mouse leave.

index.html

Edited March 18, 2013 by mandarīnpīle

[Zefirs]

Vai ir iespējams redzēt pašu repeat_scroll funkciju?

[daGrevis]

Nebūtu vienkāršāk izmantot `animate`, nevis izgudrot riteni no jauna?

[mandarīnpīle]

Vai ir iespējams redzēt pašu repeat_scroll funkciju?

 

 

Nebūtu vienkāršāk izmantot `animate`, nevis izgudrot riteni no jauna?

Editoju postu

[Mr.Key]

Uztaisi, ka otrais izsaukums ir kā callback pirmās funkcijas beigās, un tiek iebarots tajā setTimeout(). Var ne kā parametru, bet kā globālo mainīgo.

 

Vai arī uztaisi, ka ar setInterval tiek gaidīts, kad beigsies pirmā funkcija un tad palaiž otro.

Edited March 18, 2013 by Mr.Key

[webi]

Es izmantotu boolean globālu mainīgo, kuram sākot animāciju piešķirtu vērtību true, attiecīgi beidzot false.

Scrollējot pirms izpildītu funkciju pārbaudītu vai mainīgais ir false un tikai tad palaistu scroll funkciju.

 

Bet Tev nenostrādā alert(), kas ir pamata problēma.

 

 

EDIT: Neiedziļinājos.

Edited March 18, 2013 by webi

[daGrevis]

var $el = $("div")

$el.animate({"left": 200}, 2000, function() {

$el.animate({"left": 0})

})

Edited March 18, 2013 by daGrevis