Przesuwanie div'a pętlą for, domknięcia

Przesuwanie div'a pętlą for, domknięcia
adams0
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 333
0

Jak pewnie zauważyliście z poprzedniego wpisu:
Program nie działa przez <!Doctype html>
Uczę się "ruszania" obiektami na stronie.
Wpadłem na pomysł żeby robić to za pomocą pętli for:

Kopiuj
var licznik = 0, div;
function ruszaj() {
    div = document.getElementsByTagName("div")[0];
    licznik++;
    div.style.left=licznik + 'px';
}
function przesoon(){
for(var x = 0; x<200; x++) {
   setTimeOut(ruszaj, 50)
	}
}

Oczywiście wiem że to co napisałem nie będzie płynnie przesuwało diva o 200px.
Wiedziałem już wcześniej że do takich "zadań" używa się domknięć.
Z racji że nie udało mi się jeszcze pojąć tej wspaniałej idei, postanowiłem bezmyślnie podstawić pod wzór z tej strony:
http://blog.nebula.us/13-javascript-closures-czyli-zrozumiec-i-wykorzystac-domkniecia

Kopiuj
for (var i = 0; i < 5; i++) {
    (function (e) {
        setTimeout(function () {
            console.log(e);
        }, 500);
    })(i);
}

Nie zadziałało.
Co więcej: oryginalny kod wywołany w konsoli nie działa tak jak opisał to autor.
Moje pytanie: Jak mam przerobić tą funkcję żeby płynnie przesuwała diva o x pikseli i nie używała globali?

RE
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Lublin
  • Postów: 13
0

Biorąc pod uwagę błedy takie jak brak doctype z ostatniego posta, prośba abyś wrzucił to do jsfiddle jak to aktualnie masz zrobione abyśmy widzieli dokładnie ten sam problem.

LukeJL
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 8488
0

nie działa, bo odwołujesz się do nieistniejącego elementu. Kliknij to lepiej:
screenshot-20170830222518.png
jak widzisz jest tu onLoad, więc się powinno załadować
no i tak działa (tu się pomyliłem w linku przed chwilą), o tutaj działa: https://jsfiddle.net/6o32a3yj/2/

setTimeOut

setTimeout, literówka w nazwie. Nazwy w JS są czułe na wielkość liter.

adams0
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 333
0

Macie tu nową wersję w jsfiddle: https://jsfiddle.net/adams0/xhho1qkg/1/
Problem jest następujący: Jak przerobić ten program żeby płynnie przesuwał kwadrat w prawo?

fasadin
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 4883
czysteskarpety
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Piwnica
  • Postów: 7697
0

jak wyżej lub nawet velocityjs możesz użyć i nie całego tylko fragmenty do jednej animacji tylko ;)

adams0
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 333
0

Minie jeszcze jakiś czas zanim zacznę cisnąć z jQuery, ale dzięki za poszerzenie moich horyzontów, gdy nadejdzie czas będę pamiętał o tej wtyczce :-)

LukeJL
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 8488
1
Kopiuj

for(var x = 0; x<200; x++) {
   setTimeout(ruszaj, 50)
    }
}

wywołania setTimeout (a nie setTimeOut!) są niezależne od siebie, więc wywołując je po kolei wcale kolejny setTimeout nie będzie czekać, więc nie ma tego opóźnienia. To co chcesz osiągnąć możesz zrobić przez ręczne odpalanie kolejnych setTimeoutów
https://jsfiddle.net/xhho1qkg/3/
albo przez uzycie setInterval:
https://jsfiddle.net/xhho1qkg/2/

zauważ, że będziesz musiał dodać dodatkowy kod, żeby zatrzymać tę maszynę na odpowiednim x

adams0
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 333
0

A jak zrobić żeby przemieszczał się a potem wracał? :
https://jsfiddle.net/adams0/uf7arwwb/

EK
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 12
0

zamiast deklarowania zmiennej w pętli za pomocą var użyj let. Powinno działać. Let powoduje utworzenie za każdym razem nowej zmiennej i nie "wyrzuca" zmiennej do zakresu nadrzędnego jak to jest w przypadku var

DU
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 106
2

A tak abstrahując zupełnie od tematyki js, moim zdaniem animacje interfejsu powinno wykonywać się w CSS za pomocą @keyframes lub jeśli to jakiś mało skomplikowany twór, transition.

Szybciej, natywnie i lekko.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.