უკუსვლის შექმნა (ვიდეო-ვერსია)

მაქვს ვებგვერდი, "ოჰ არას" სურათით,

რომელიც გაგიჟებულია, რომ
სამყაროს დასასრული მალე დადგება --

კონკრეტულად, 500 წამში.

მინდა ეს ვებგვერდი
უფრო სასარგებლო გავხადო,

ეს რიცხვი
გადავაქციო რეალურ უკუთვლად,

ისე რომ, ვიზიტორებმა
შეძლონ ნახვა, რამდენი დრო დარჩათ.

ახლა, როცა გავაცოცხლეთ ვებგვერდი,

სტრატეგია შემდეგია: უნდა ვიპოვოთ
რაღაც ელემენტი მასში,

შემდეგ რაღაც შევცვალოთ
ამ ელემენტში

და ეს რამდენჯერმე გავიმეოროთ.

პირველ რიგში უნდა ვიპოვო მთვლელი
მისი ID-თი

ეს მარტივია.

[ბეჭდავს]

შემდეგ, უნდა დავწერო ფუნქცია, რომელიც
უკუსვლით დაითვლის.

[ბეჭდავს]

შემდეგ კი --

მინდა რომ 'textContent' იყოს

წინა რიცხვს მინუს ერთის ტოლი.

'textContent' რეალურად იქნება ხაზი,

რომელიც გვინდა გადავქციოთ რიცხვად

ამის გაკეთება 'parcfloat()' -ით შეგვიძლია.

შემდეგ კი შეგვიძლია გამოვაკლოთ ამას 1.

დაბოლოს, ჩვენ ამ ფუნქციის გამოძახება
გარკვეული ინტერვალით გვინდა,

ანუ, წამში X-ჯერ.

ამის გაკეთებაში გამოგვადგება
'window.setInterval()'

ეს ფუნქცია მოითხოვს ორ არგუმენტს:

გამოძახების ფუნქციას და მილიწამების
რაოდენობას, რომლის გასვლისასაც

ეს ფუნქცია ისევ უნდა გამოვიძახოთ.

გამოძახების ფუნქციის განსაზღვრა შეგვიძლია
ისევე,

როგორც ის ღონისძიების დამსწრეთათვის
განვსაზღვრეთ: სახელით

შემდეგ კი - ახლა ის ძალიან სწრაფია,

იმიტომ რომ
წამების არგუმენტი არ განგვისაზღვრავს--

გვინდა, რომ ეს მილიწამების გარკვეული
რაოდენობის გასვლისას მეორდებოდეს;

კერძოდ, ერთხელ წამში რომ მეორდებოდეს.
ანუ, ყოველ ათას მილიწამში

იმიტომ რომ წამში ათასი მილიწამია.

მშვენირია, ახლა ყოველ წამში
თითო რიცხვით გადადის უკან.

490 წამი დაგრჩა, რომ მაქსიმალურად ბევრი
რამ ისწავლო!

კიდევ ერთი ფუნქცია, რომელსაც ხანდახან
'setInterval'-ის მაგივრად ვიყენებთ

არის 'setTimeout'

ახლა შევცვლი და დააკვირდით,
თუ შეამჩნევთ სხვაობას

ერთი წამიც მოიცადეთ..

აი, ახლა, ალბათ, ხედავთ, რომ როცა
ვიყენებთ 'setTimeout' ფუნქციას

ბრაუზერი ფუნქციას იძახებს ერთხელ,
გამეორების გარეშე.

ასე რომ, ამ შემთხვევაში ეგ არ გამოგვადგება.

მაგრამ სხვა შემთხვევებში შეიძლება ძალიან
სასარგბელო ფუნქცია აღმოჩნდეს:

მაგალითად, თუ ჩვენს მომხმარებლებს
გამაფრთხილებელ ბანერს ვუჩვენებთ

და გვინდა, რომ იგი 10 წამში გაქრეს.

ახლა ეს ისევ 'setInterval'-ად
შევცვალოთ.

ახლა, როცა მსგავს ანიმაციებს ვტესტავთ

უნდა ვნახოთ, როგორ გამოიყურება ის თავიდან
ბოლომდე;

მაგალითად, უნდა ვნახოთ, რა ხდება
როცა მივიღებთ 0-ს.

ძალიან დიდი ხანი მოგივწევს ცდა

რაც მოსაწყენია;

ამიტომ საწყის წერტილად ავიღოთ 5

და ვნახოთ, რა მოხდება.

ოთხი, სამი, ორი, ერთი, ნული...

მინუს ერთი, მინუს ორი.

ეს ცოტა უცნაურია.

როცა სამყარო დასრულდება, უბრალოდ უნდა
ავფეთქდეთ და შევწყვიტოთ თვლა.

გამოდის, რომ ჩვენ გვინდა

შევაჩეროთ უკუთვლა, როცა ის ნულამდე მივა.

ამის გაკეთება 'if' პირობით შეგვიძლია,
ფუნქციის შიგნითვე.

პირველ რიგში, მიმდინარე დრო ცვლადად
უნდა შევინახო, იმიტომ რომ

მას არაერთხელ გამოვიყენებთ.

ავიღოთ ეს, ჩავსავთ აქ;

და ჩავანაცვლოთ ეს ცვლადით 'currentTime'

ახლა უნდა შევქმნა 'if' პირობა,

რომლის გამოც ტექსტი შეიცვლება მხოლოდ მაშინ
როცა 'currentTime' 0-ზე მეტია.

ერთის გამოკლება მხოლოდ ამ შემთხვევაში გვინდა.

ეს აქ უნდა გადავიტანო, შიგნით.

ეს მუშაობს.. თუმცა ამ მიდგომას ერთი დიდი
ნაკლი აქვს.

ბრაუზერი გააგრძელებს ფუნქციის გამოძახებს
ყოველ ერთ წამში,

სანამ ვებ-გვერდი ღიაა.

ბრაუზერებს კი უამრავი სხვა საქმე აქვთ
გასაკეთებელი

და ტყუილ-უბრალოდ არ უნდა გამოვაძახებინოთ
ფუნქცია.

ამიტომ, სინამდვილეში გვინდა, რომ

ბრაუზერმა შეწყვიტოს ფუნქციის გამოძახება,
როცა იგი ნულს გაუტოლდება.

ამას ახალი მეთოდის გამოყენებით ვიზამთ,
რომელსაც ჰქვია 'window.clearInterval()'.\

ჩავსვათ ეს 'window.clearInterval()' აქ -
'else' -ის ველში.

ახლა ფუნქციას უნდა მივაწოდოთ არგუმენტი,
რომ გაიგოს, რომელი ინტერვალი უნდა შეწყვიტოს.

გვერდზე ხომ ბევრი სხვადასხვა ინტერვალი
შეიძლება, გვქონდეს.

იმისთვის, რომ გავიგოთ, რომელი
ინტერვალია შესაწყვეტი,

'setInterval'-ის შედეგი უნდა შევინახოთ ცვლადად.

ახლა მაქვს მთვლელის ცვლადი,
რომელიც შემიძლია აქ ჩავსვა

და გავაგებინო ფუნქციას, რა უნდა შეწყდეს
როცა მთვლელი მივა 0-მდე:

უნდა დასრულდეს განახლება
და ამ ფუნქციის გამოძახება.

ყოველი ანიმაციისთვის ზედმიწევნით ზუსტად
უნდა განსაზღვროთ,

რა პირობით უნდა ჩერდებოდეს იგი.

და კი, შეიძლება ისეთი ანიმაცია შექმნათ,
რომელიც უსასრულოდ უნდა გრძელდებოდეს,

მაგრამ ეს რამე გასაკუთრებით კარგი უნდა იყოს

იმიტომ რომ თქვენი ბრაუზერი რეალურად
იტვირთება, როცა იძახებს რაღაც ფუნქციას.

ახლა კი დროა ავაფეთქოთ ეს სამყარო!